AngularJS Digest Cycle and How it Works.

The power of AngularJS lies in it core featured, two way data bind. In it simplest form, two way data binding provides the user with virtually immediate changes in the DOM as changes occurs on Angular’s $scope or model.

This means, upon adding a model value to our HTML using Angular’s double bracket interpolation notation such as {{val}}, if {{val}} is updated via an ng-click or ng-model, the value will be updated in our model as well as in the view. But how does this work?

<p>{{val}}</p>

At the point of adding {{val}}, a $watch() is applied to our value. Angular’s $watch() contains a callback which will update the DOM according to any changes in the model.

$scope.$watch('val', function(new, old) {
//updated HTML views with new value.
});

With $watch() in place, the next step is to invoke $watch() upon any changes to model. Enter $digest()… Angular’s $digest() is invokes all existing $watch() callbacks.

Upon $digest() invoking all $watch() callbacks, all views will be updated according to the model changes. When $digest() is completed it will start over and check for any additional model changes and if so, $digest() will start again. And with this, we have a virtually immediate change to view.

-Jayce Tan