Angelo Moreira Angelo Moreira - 2 years ago 73
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.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(){, marker);
$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.

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download