ui-gmap-windows not showing popup even data is updating only working when we do other mouse operations

[Srinu Anumaneni]

my code is : var myApp = angular.module('app', ['uiGmapgoogle-maps']);

myApp.config(function (uiGmapGoogleMapApiProvider) { uiGmapGoogleMapApiProvider.configure({ key: '', v: '3', libraries: 'weather,geometry,visualization' }); });

myApp.controller('MainCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

uiGmapGoogleMapApi.then(function (maps) {

    $scope.googlemap = {};

    $scope.map = {

        center: {

            latitude: 37.78,

            longitude: -122.41

        },

        zoom: 14,

        pan: 1,

        options: $scope.mapOptions,

        control: {},

        events: {

            tilesloaded: function (maps, eventName, args) {},

            dragend: function (maps, eventName, args) {},

            zoom_changed: function (maps, eventName, args) {}

        }

    };

});

$scope.windowOptions = {

    show: false,

    content:''

};

$scope.onClick = function (data) {

    $scope.windowOptions.show = !$scope.windowOptions.show;

    $scope.windowOptions.content = data;

    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);

    console.log('This is a ' + data);

    //alert('This is a ' + data);

};

$scope.closeClick = function () {

    $scope.windowOptions.show = false;

};

$scope.title = "Window Title!";

uiGmapIsReady.promise() // if no value is put in promise() it defaults to promise(1)

.then(function (instances) {

    console.log(instances[0].map); // get the current map

})

    .then(function () {

    $scope.addMarkerClickFunction($scope.markers);

});

$scope.markers = [{

    id: 0,

    coords: {

        latitude: 37.7749295,

        longitude: -122.4194155

    },

    data: 'restaurant'

}, {

    id: 1,

    coords: {

        latitude: 37.79,

        longitude: -122.42

    },

    data: 'house'

}, {

    id: 2,

    coords: {

        latitude: 37.77,

        longitude: -122.41

    },

    data: 'hotel'

}];

$scope.addMarkerClickFunction = function (markersArray) {

    angular.forEach(markersArray, function (value, key) {

        value.onClick = function () {

            $scope.onClick(value.data);

            $scope.MapOptions.markers.selected = value;

        };

    });

};

$scope.MapOptions = {

    minZoom: 3,

    zoomControl: false,

    draggable: true,

    navigationControl: false,

    mapTypeControl: false,

    scaleControl: false,

    streetViewControl: false,

    disableDoubleClickZoom: false,

    keyboardShortcuts: true,

    markers: {

        selected: {}

    },

    styles: [{

        featureType: "poi",

        elementType: "labels",

        stylers: [{

            visibility: "off"

        }]

    }, {

        featureType: "transit",

        elementType: "all",

        stylers: [{

            visibility: "off"

        }]

    }],

};

});

  template += '<ui-gmap-google-map id="map" center="map.center"  pan="map.pan" zoom="map.zoom" draggable="true" refresh="map.refresh" options="map.options"  events="map.events" control="googlemap" bounds="map.bounds">';

/click="onClick(address)"

template += ' '; template += ''; template += 'hello '; template += ' '; template += ' ';

I am filling template and i am putting that into jsp dynamically. But when i click on marker console log is coming properly but popup is not showing, if i move map little bit then it is showing popup on marker. Same code working when i ran in as separate html and js file with static data. can any one please help me on this