Angularjs Data Binding

Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.
Angular follow three types of Data-binding method:
 One-way Data-binding
 Two-way Data-binding
 One-Time Data-binding
One-Way Data Binding

The one-way data binding is an approach where data flow from the data model ($scope) to view.  There is no way to update model from view. It is used in classical template systems. These systems bind data in only one direction. Usually performed through “ng-bind” or evaluation expression.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <h2>Name : {{ name }} </h2>
    <p ng-bind="age"></p>
</div>

<script>
var app = angular.module("myApp", [])
.controller('myCtrl', function($scope) {
        $scope.name = "xyz";
 $scope.age = 30;
});
</script>
<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>
</body>
</html>
Note ng-bind directive work with non-input type element like text, email, radio and select etc. The ng-bind work with an element like div, paragraph, span and we can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
Two-way data Binding
The ng-model directive binds the value of HTML controls (input, select, text area) View to Model in controller application data. The binding goes both direction model to view and view to model. If the user changes the value inside the input field, the AngularJS change the corresponding model will also change its value.

In the example, we are using the model to bind user first and last name into one full name. We can achieve this with help of ng-model, ng-bind and ng-click. 

<html ng-app="myApp">
<html>
<script src="js/angular.min.js"></script>
<body ng-controller="myCtrl">
<div >
  <p>Enter the First Name: <input type="text" ng-model="fname"></p>
  <p>Enter the Last Name: <input type="text" ng-model="lname"></p>
  <button ng-click="getFullName()">Get Full Name</button>

  Full Name : <label ng-bind="fullName"></label>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope){
    $scope.fname = "";
    $scope.lname= "";
    $scope.fullName ="";
    $scope.getFullName = function(){
      $scope.fullName = $scope.fname + " " + $scope.lname;
    }
  });
</script>
</body>
</html>
In this example we are using 4 model object, $compile will check what binding model is made in our application. We need a custom javascript function to handle all the binding for all above model object element. In AngularJs we can use a controller to handle this model. The controller will have a $scope as the reference to access the data binding of our application in our controller and we will use ng-controller to bind our controller in our template.
 One-Time Data-binding
In AngularJS, data gets transferred from model to view only one time. Ones the change happen in mode, it won’t impact on view again and again.
Data always flow from model to view or scope to view
Data populated only once
Data doesn’t travel from view to model

Rendering the one-time data view can be accomplished using: :[double colon] special character

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <p>Value of number1 : {{num1}}</p>
    <p>Value of number2 : {{num2}}</p>
    <button ng-click="doubleValue()">Double Value Calculate</button>
    
    <p>Initial Value of number1 : {{::num1}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.num1 = 10;
    $scope.num2 = 50;    
    
    $scope.doubleValue = function(){
     $scope.num1 = $scope.num1 * 2;
        $scope.num2 = $scope.num2 * 2;
    }
});
</script>
</body>
</html>