AngularJS : Basic $watch not working

Question

I\'m attempting to set up a watch in AngularJS and I\'m clearly doing something wrong, but I can\'t quite figure it out. The watch is firing on the immediate page load, but

Answer 1

It's because you update the value without Angular knowing.

You should use the $timeout service instead of setTimeout, and you won't need to worry about that problem.

function testCtrl($scope, $timeout) {
    $scope.hello = 0;

    var t = $timeout( function() { 
        $scope.hello++;
        console.log($scope.hello); 
    }, 5000);

    $scope.$watch('hello', function() { console.log('watch!'); });
}

Or you could call $scope.$apply(); to force angular to recheck the values and call watches if necessary.

var t = setTimeout( function() { 
    $scope.hello++;
    console.log($scope.hello); 
    $scope.$apply();
}, 5000);

Answer 2

You can use without $interval and $timeout

$scope.$watch(function() {
            return variableToWatch;
        }, function(newVal, oldVal) {
            if (newVal !== oldVal) {
                //custom logic goes here......
            }
        }, true);

Answer 3

It can also happen because the div is not registered with the controller. Add a controller to your div as follows and your watch should work:

<div ng-controller="myController">