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);
    });
});