$watch in angularJS

Digest cycle and $scope

     First and foremost, Angular defines a concept of a so called digest cycle. This cycle can be considered as a loop, during which Angular checks if there are any changes to all the variables watched by all the $scopes. So if you have $scope.myVar defined in your controller and this variable was marked for being watched, then you are implicitly telling Angular to monitor the changes on myVar in each iteration of the loop.

     A natural follow up question would be: is everything attached to $scope being watched? Fortunately, no. If you would watch for changes to every object in your $scope, then quickly digest loop would take ages to evaluate and you would quickly run into performance issues. That is why Angular team gave us two ways of declaring some $scope variable as being watched (read below).

$watch helps to listen for $scope changes

There are two ways of declaring a $scope variable as being watched.

By using it in your template via expression: <span>{{myVar}}</span>
By adding it manually via $watch service
     1) This is the most common scenario and I'm sure you've seen it before, but you didn't know that this has created a watch in the background. Yes it had! Using Angular directives (such as ng-repeat) can also create implicit watches.

     2) This is how you create your own watches. $watch service helps you to run some code when some value attached to the $scope has changed. It is rarely used, but sometimes is helpful. For instance, if you want to run some code each time 'myVar' changes, you could do the following:

function MyController($scope) {



   $scope.myVar = 1;



   $scope.$watch('myVar', function() {

       alert('hey, myVar has changed!');

   });



   $scope.buttonClicked = function() {

      $scope.myVar = 2; // This will trigger $watch expression to kick in

   };



}

Example Program:- (Editor)

Editor is Loading...

Output:-

Advertisement