Angelo Moreira Angelo Moreira - 6 months ago 16
AngularJS Question

Angular does not update inside a GMap object

I am just starting to work with Angular and I am absolutely loving it, I am doing a Google Maps App running on Angular and have a problem updating my template inside a Google Map object, here is the code:

Map.addMarker = function(objMarker){
var overviewBox = 'some random text here';
var GmapLatLng = new google.maps.LatLng(objMarker.lat, objMarker.lng);
var GmapInfoWindow = new google.maps.InfoWindow({
content: overviewBox,
maxWidth: 400
});

var marker = new google.maps.Marker({
position : GmapLatLng,
map : MapApp.Gmap,
icon : '/images/nice-custom-marker.png',
title : objMarker.title,
cleanTitle : objMarker.cleanTitle
});

$scope.marker.title = "Hello from the add marker";
google.maps.event.addListener(marker, 'click', function(){
GmapInfoWindow.open(MapApp.Gmap, marker);
Map.getMarker(marker.cleanTitle);
$scope.marker.title = "Hello from the add marker listener";
});
}


I can replace my {{title}} on the template with "Hello from the add marker" but I cannot do the same inside of the click listener "Hello from the add marker listener" when I console.log($scope) I do have access to the $scope object though, I am very confused here, anybody knows about what might go wrong and how I can work around it?

Thank you in advance.

Edit:
Just tried with Jquery

$('#contentView>h1').text("Hello from the add listener");
$scope.marker.title = "Hello from the add listener";


and obviously it works but I really would like to use Angular instead :(

Answer

It turned out I had to use $scope.$apply(); after setting my variable, for a more in depth explanation you can read this Angular .$apply