AngularJS trigger and watch object value change in service from controller

Question

I\'m trying to watch for changes in a service from a controller. I tried various things based on many qns here on stackoverflow, but I\'ve been unable to make it work.

Answer 1

Try to write $watch by this way:

myApp.controller('MyCtrl', function($scope, myService) {


    $scope.setFTag = function() {
       myService.setFalseTag();
    };        

    $scope.$watch(function () {
       return myService.tags;
     },                       
      function(newVal, oldVal) {
        /*...*/
    }, true);

});

Demo Fiddle

[EDIT]

Sometimes this way will not work especially if service has been updated from 3d party.

To make it work we must help to angular to fire digest cycle.

Here is an example:

On service side when we want update tags value write something like:

if($rootScope.$root.$$phase != '$apply' && $rootScope.$root.$$phase != '$digest'){
   $rootScope.$apply(function() {
     self.tags = true;
   });
 }
 else {
   self.tags = true;
  }