AngularJs $scope variable doesn't change

Question

I have such Andularjs code in my app:

angular.module('FlickrMaps', ['SignalR'])
.factory('PhotoMarkers', ['$rootScope', 'Hub', function ($rootScope, Hub) {
 var PhotoMarkers = this;
 //Hub setup
 var hub = new Hub('photos', {
 listeners: {
 'addTotalPhotosCount': function (total) {
 PhotoMarkers.totalCount = total;
 $rootScope.$apply();
 },
 'initPhotoMarker': function (photo) {
 var photolocation = new window.google.maps.LatLng(photo.Latitude, photo.Longitude);
 var marker = new window.google.maps.Marker({
 position: photolocation,
 title: photo.Title,
 photoThumb: photo.PhotoThumbScr,
 photoOriginal: photo.PhotoOriginalScr
 });
 window.google.maps.event.addListener(marker, 'click', function () {
 $rootScope.$broadcast('markerClicked', marker);
 });
 PhotoMarkers.all.push(marker);
 $rootScope.$apply();
 },
 'photosProcessed': function () {
 PhotoMarkers.processedPhotosCount++;
 if (PhotoMarkers.processedPhotosCount == PhotoMarkers.totalCount && PhotoMarkers.processedPhotosCount > 0) {
 $rootScope.$broadcast('markersLoaded');
 }
 $rootScope.$apply();
 },
 },
 methods: ['loadRecentPhotos'],
 errorHandler: function (error) {
 console.error(error);
 }
 });
 //Variables
 PhotoMarkers.all = [];
 PhotoMarkers.processedPhotosCount = 0;
 PhotoMarkers.totalCount = 0;
 //Methods
 PhotoMarkers.load = function () {
 hub.promise.done(function () { //very important!
 hub.loadRecentPhotos();
 });
 };
 return PhotoMarkers;
}])
.controller('MapController', ['$scope', 'PhotoMarkers', function ($scope, PhotoMarkers) {
$scope.markers = PhotoMarkers;
$scope.image = '123';
$('#myModal').modal({
 backdrop: 'static',
 keyboard: false
});
$scope.$on('markerClicked', function (event, data) {
 console.log(data.photoThumb);
 $scope.omfg = 'nkfglfghlfghflj';
});
$scope.$on('markersLoaded', function () {
 $('#myModal').modal('toggle');
 $scope.image = 'lol';
 var mapOptions = {
 zoom: 4,
 center: new window.google.maps.LatLng(40.0000, -98.0000),
 mapTypeId: window.google.maps.MapTypeId.TERRAIN
 };
 console.log(PhotoMarkers.all);
 $scope.map = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 var markerCluster = new MarkerClusterer($scope.map, $scope.markers.all);
}); 
}])

$broadcast and $on services work finem but when I try to change $scope.image variable on markerClicked event it doesn't change on view page, but for markersLoaded it changes. Does anyone have any ideas? I tried lot of ways to fix it...

Answer 1

You need to wrap it inside $apply since you are in a callback outside angular:

window.google.maps.event.addListener(marker, 'click', function () {
 $rootScope.$apply(function() {
 $rootScope.$broadcast('markerClicked', marker);
 });
});