How to watch a primitive service variable in controller with AngularJS?

Question

I\'m trying to use $watch for it. The $watch body firing at page initialization (with undefined in newValue) and not firing at \"btnChangeIsLoggedIn\" click.

<         


        

Answer 1

You can pass a function that will return the value of the Service's method. Angular will then compare it to the previous value.

$scope.$watch(function(){
    return authService.isLoggedIn;
}, function (newValue) {
    alert("isLoggedIn changed to " + newValue);
});

Demo: http://jsfiddle.net/TheSharpieOne/RA2j7/2/

Note: the reason the text field value doesn't update is because the button only changes the service's value, not the $scope's You can also get rid of that initial alert (running of the change function) but comparing the newValue to the oldValue and only executing the statements if they are different.