updating controller over service not updating view

Question

in my app I have an "Maps" to show and handle things on maps. A CtrlMap controller display the map and shows an marker. The watchPosMap watches position changes. 3rd there is an service called markerService which hold the properties (location) of the marker.

The structure looks like that.

[CtrlMap] <-> [MarkerService] <- [watchPosMap]

This is the service:

MyMapApp.service('MarkerService', function () {
    //set initial marker if no one exists
    if (property == undefined)
    {
        var property = {
            latitude: 44.49,
            longitude: -108.42};
    }
    return {
        getP: function () {
            return property;
        },
        setP: function(lat,lng) {
            consolie.info('Have new marker properties:', lat,lng);
            property = {
                latitude: lat,
                longitude: lng};
        }
    };
});

On startup, the CtrlMap controller gets the default marker settings in that way: $scope.marker = MarkerService.getP(). That works well.

If the position of the device is changed, the watchPosMap includes an navigator.geolocation.watchPosition method with an callback, that calls the service MarkerService in order to set the new marker parameter.

This is my watchPosMap controller:

MyMapApp.controller('watchPosMap', ['$scope', 'MarkerService', function($scope) {            
$scope.watchMyPositionChangesID = 
          navigator.geolocation
                    .watchPosition(function(data) {
                        mapScope=angular.element(document.getElementById('id_map'))
                                .scope();
                        angular.element(document.getElementById('id_map'))
                                .injector().get("MarkerService")
                                .setP(data.coords.latitude,data.coords.longitude);
                        mapScope.$apply();
                       },
                       function(e){$scope.errorMsg=e;},
                       { timeout: 30000 }
                      );

}]);

Setting the marker property works, but the view is not updated. Is there anything todo to trigger the view update?

Answer 1

If you are in appropriate scope, then you have to update scope as you are modifying things outside angular.

angular.element(document.getElementById('id_map')).scope().$apply();

EDIT after comment:

Your scope marker is not updated event though it is set in service. It has to updated before you use $apply()

mapScope.marker = angular.element(document.getElementById('id_map'))
                            .injector().get("MarkerService")
                            .getP();

EDIT 2: More Cleaner way $apply of scope has a callback function which you can use to achieve the same

navigator.geolocation
                .watchPosition(function(data) {
                     mapscope = angular.element(document.getElementById('id_map')).scope()
                     mapscope.$apply(function(scope){
                       MarkerService.setP(data.coords.latitude,data.coords.longitude); 
                       scope.marker = MarkerService.getP();
                     });
                   },
                   function(e){$scope.errorMsg=e;},
                   { timeout: 30000 }
                  );