Two-way binding

1. Overview

Data binding in AngularJS is the synchronization between the model and the view. It means if a value of a scope model changes it automatically updates the same value in the view and similarly if the value in the view changes it automatically updates the value in the scope model.

2. Description

2.1 Data Model

AngularJS applications usually have a data model. The data model is a collection of data available for the application.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});

2.2 HTML View

The HTML container where the AngularJS application is displayed is called the view.

<p ng-bind="firstname"></p>

<p>First name: {{firstname}}</p>

<input ng-model="firstname">

2.3 Two-way Binding

Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view are updated at all times.

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});
</script>

2.4 AngularJS Controller

Applications in AngularJS are controlled by controllers. Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view, and simply concentrate on the model data. Thanks to the data binding in AngularJS, the view will reflect any changes made in the controller.

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

3. How Two-way binding works

When we write an expression ({{dyanvar}}), behind the scenes Angular sets up a watcher on the scope model, which in turn updates the view whenever the model changes. This watcher is like any other watcher we set up in AngularJS:

$scope.$watch('dyanvar', function(newValue, oldValue) {
  //update the view with newValue
});

The second argument passed to $watch() is known as a listener function, and It is called whenever the value of dyanvar changes.

When the value of dyanvar changes this listener is called, updating the expression in HTML.
But still, How does Angular figure out when to call this listener function? In other words, how does AngularJS know when {{dyanvar}} changes so that it can call the corresponding listener? Does it run a function in a particular interval to check whether the value of the scope model has changed or not? Well, this is where the $digest cycle comes into the picture.

It’s the $digest cycle where the watchers are fired. When a watcher is fired, AngularJS evaluates the scope model, and if it has changed its value then the corresponding listener function is called. So, now the question is when and how this $digest cycle starts.

The $digest cycle starts as a result of a call to $scope.$digest(). Assume that we change a scope model in a handler function through the ng-click directive. In that case AngularJS automatically triggers a $digest cycle by calling $digest(). When the $digest cycle starts, it fires each of the watchers. These watchers check if the current value of the scope model is different from the last calculated value. If yes, then the corresponding listener function executes. As a result, if you have any expressions in the view they will be updated. In addition to ng-click, there are several other built-in directives/services that let us change models (e.g. ng-model, $timeout, etc) and automatically trigger a $digest cycle.

But Angular doesn’t directly call $digest(). Instead, it calls $scope.$apply(), which in turn calls $rootScope.$digest().
As a result of this, a digest cycle starts at the $rootScope and subsequently visits all the child scopes calling the watchers along the way.

Now, let’s assume you attach an ng-click directive to a button and pass a function name to it. When the button is clicked, AngularJS wraps the function call within $scope.$apply(). So, your function executes, as usual, change models (if any), and a $digest cycle starts to ensure your changes are reflected in the view.

3.1 When do we need to use $apply() manually?

If AngularJS usually wraps our code in $apply() and starts a $digest cycle, then when do you need to do call $apply() manually?
Actually, AngularJS makes one thing pretty clear. It will account for only those model changes which are done inside AngularJS’ context Angular’s built-in directives already do this so that any model changes you make are reflected in the view.
However, if you change any model outside of the Angular context,(For example if we update a model using a jquery plugin) then you need to inform Angular of the changes by calling $apply() manually. In these cases either we can call to $apply() or $digest() to kick off a digest cycle for dirty checking, but it always recommended using $apply() as it has built-in error handling mechanism.

4. Reference

https://docs.angularjs.org/tutorial/step_06

https://docs.angularjs.org/guide/databinding

https://cfdeepak.wordpress.com/2014/09/29/how-two-way-data-binding-works-in-angular-js/