The Scope Life Cycle
Scope data goes through a life cycle while the application is loaded in the browser. Understanding this life cycle will help you understand the interaction between scope and other AngularJS components, especially templates.
Scope data goes through the following life cycle phases:
1. Creation
2. Watcher registration
3. Model mutation
4. Mutation observation
5. Scope destruction
These life cycle phases are described in the sections below.
The Creation Phase
The creation phase occurs when a scope is initialized. Bootstrapping the application creates a root scope. Linking the template creates child scopes when ng-controller or ng-repeat directives are encountered.
Also during the creation phase, a digest loop is created that interacts with the browser event loop. The digest loop is responsible for updating DOM elements with changes made to the model as well as executing any registered watcher functions. Although you should never need to execute a digest loop manually, you can do so by executing the $digest() method on the scope. For example, the following evaluates any asynchronous changes and then executes the watch functions on the scope:
$scope.$digest()
The Watcher Registration Phase
The template linking phase registers watches for values in the scope that are represented in the template. These watches propagate model changes automatically to the DOM elements.
You can also register your own watch functions on a scope value by using the $watch() method. This method accepts a scope property name as the first parameter and then a callback function as the second parameter. The old and new values are passed to the callback function when the property is changed in the scope.
For example, the following adds a watch to the property watchedItem in the scope and increments a counter each time it is changed:
$scope.watchedItem = 'myItem';
$scope.counter = 0;
$scope.$watch('name', function(newValue, oldValue) {
$scope.watchedItem = $scope.counter + 1;
});
The Model Mutation Phase
The model mutation phase occurs when data in the scope changes. When you make changes in your AngularJS code, a scope function called $apply() updates the model and calls the $digest() function to update the DOM and watches. This is how changes made in your AngularJS controllers or by the $http, $timeout, and $interval services are automatically updated in the DOM.
You should always try to make changes to scope inside the AngularJS controller or those services. However, if you must make changes to the scope outside the AngularJS realm, you need to call scope.$apply() on the scope to force the model and DOM to be updated correctly. The $apply() method accepts an expression as the only parameter. The expression is evaluated and returned, and the $digest() method is called to update the DOM and watches.
The Mutation Observation Phase
The mutation observation phase occurs when the $digest() method is executed by the digest loop, an $apply() call, or manually. When $digest() executes, it evaluates all watches for changes. If a value has changed, $digest() calls the $watch listener and updates the DOM.
The Scope Destruction Phase
The $destroy() method removes scopes from the browser memory. The AngularJS libraries automatically call this method when child scopes are no longer needed. The $destroy() method stops $digest() calls and removes watches, allowing the memory to be reclaimed by the browser garbage collector.