Understanding Data Binding in AngularJS

AngularJS data-binding is the most useful feature which saves you from writing boilerplate code (i.e. the sections of code which is included in many places with little or no alteration). Now, developers are not responsible for manually manipulating the DOM elements and attributes to reflect model changes. AngularJS provides two-way data-binding to handle the synchronization of data between model and view.

How AngularJS handle data binding

AngularJS handle data-binding mechanism with the help of three powerful functions: $watch(), $digest() and $apply(). Most of the time AngularJS will call the $scope.$watch() and $scope.$digest() functions for you, but in some cases you may have to call these functions yourself to update new values.

Two-way data binding

It is used to synchronize the data between model and view. It means, any change in model will update the view and vice versa. ng-model directive is used for two-way data binding.

Issue with two-way data binding

In order to make data-binding possible, Angular uses $watch APIs to observe model changes on the scope. Angular registered watchers for each variable on scope to observe the change in its value. If the value, of variable on scope is changed then the view gets updated automatically.

This automatic change happens because of $digest cycle is triggered. Hence, Angular processes all registered watchers on the current scope and its children and checks for model changes and calls dedicated watch listeners until the model is stabilized and no more listeners are fired. Once the $digest loop finishes the execution, the browser re-renders the DOM and reflects the changes.

By default, every variable on a scope is observed by the angular. In this way, unnecessary variable are also observed by the angular that is time consuming and as a result page is becoming slow. Hence to avoid unnecessary observing of variables on scope object, angular introduced one-way data binding.

One-way data binding

This binding is introduced in Angular 1.3. An expression that starts with double colon (::), is considered a one-time expression i.e. one-way binding.

Two-Way and One-Way data binding Example

<div ng-controller="MyCtrl">
 <label>Name (two-way binding): <input type="text" ng-model="name" /></label>
 <strong>Your name (one-way binding):</strong> {{::name}}<br />
 <strong>Your name (normal binding):</strong> {{name}}
</div>
<script>
 var app = angular.module('app', []);
 app.controller("MyCtrl", function ($scope) {
 $scope.name = "Shailendra Chauhan"
 })
</script>

What do you think?

I hope you will enjoy the AngularJS data binding while developing your app with AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Further Reading