Dynamic HTML with Angular JS and google maps infoWindow - angularjs

Question

I got an issue when trying to display some html in an infoWindow.
in this example, i want to increment the value of $scope.number each time i click on a marker, the problem is that the value is correctly incremented (you can console.log to see it) but the infoWindow is still showing 0
PS: I really need to set the infoWindow content as a document.getElementById
thanks and sorry for my bad english :D
$scope.number=0;
$scope.infoWindow = new google.maps.InfoWindow({
content: document.getElementById("infoWindow")
});
navigator.geolocation.getCurrentPosition(function(pos){
$scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var mapOptions = {
center: $scope.position,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(36.712215,3.196801),
map: $scope.map
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(36.759615,2.9286236),
map: $scope.map
});
google.maps.event.addListener(marker1, "click", function(){
$scope.number++;
if($scope.infoWindow) $scope.infoWindow.close();
$scope.infoWindow.open($scope.map, this);
});
google.maps.event.addListener(marker2, "click", function(){
$scope.number++;
console.log($scope.number);
if($scope.infoWindow) $scope.infoWindow.close();
$scope.infoWindow.open($scope.map, this);
});
});
<div id="map" class="has-header"></div>
<div ng-hide="true">
<div id="infoWindow">
{{number}}
</div>
</div>

Answer 1

As you're incrementing the counter $scope.number outside of angular context, you may need to trigger $scope.$apply(); to reflect the changes in scope.
So inside your google.maps event handler, after you increment the counter $scope.number++, call $scope.$apply();
google.maps.event.addListener(marker1, "click", function(){
$scope.number++;
if($scope.infoWindow) $scope.infoWindow.close();
$scope.infoWindow.open($scope.map, this);
$scope.$apply();
});
google.maps.event.addListener(marker2, "click", function(){
$scope.number++;
console.log($scope.number);
if($scope.infoWindow) $scope.infoWindow.close();
$scope.infoWindow.open($scope.map, this);
$scope.$apply();
});
Another hacky option would be to wrap the $scope.number++ inside $timeout. $timeout will trigger the $digest cycle as well.