Subscribe to Property Change in AngularJS

The scope object in AngularJS has a special method called $watch for ‘watching’ scope properties.

It accepts a callback that receives the new and the old value of the model:

$scope.$watch('modelName', function(newValue, oldValue){
    // Do anything you like here
});

The callback is on initialization and each time the model changes. Therefore it may be good to add an extra check for equality like this:

$scope.$watch('modelName', function(newValue, oldValue){

    // Check if value has changes
    if(newValue === oldValue){
        return;
    }

    // Do anything you like here
});

This allows you to ‘watch’ your model and perform some action if needed.

One extra remark: if you’re watching a model that contains an object, you should use an extra third parameter that tells AngularJS to compare both values by object equality and not by reference (as the reference would not change and thus not trigger the watcher) like this:

$scope.$watch('modelName', function(newValue, oldValue){
    // Do anything you like here
}, true); // Add extra 'true' parameter to check for object equality

You can read more documentation on the AngularJS scope page.

Hope that helps!