Google News
logo
AngularJS Data Binding
AngularJS data binding is a very powerful and useful in  web development. The AngularJS data binding is the synchronization between the model and the view.

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('my_App', []);
app.controller('myCtrl', function($scope) {
    $scope.f_name = "Venkataramana Reddy";
    $scope.l_name = "Vippagunta";    
});
Two Way Data Binding

Data-binding in Angular apps is the automatic synchronization between the model and view components.

Two way data binding model as the single-source-of-truth in your application. 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 is updated at all times.

Two way data binding
Example :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
 
<body>
 
<div ng-app="my_App" ng-controller="myCtrl">
 
    Name: <input ng-model="f_name" type="text">
    <h2>First Name : {{f_name}}</h2>
    
</div>
 
<script type="text/javascript">
var app = angular.module('my_App', []);
app.controller('myCtrl', function($scope) {
    $scope.f_name = "Venkataramana Reddy";
    $scope.l_name = "Vippagunta";    
});
</script>
 
</body>
</html>
Output :
In the above example, the {{ f_name }} expression is an AngularJS data binding expression. Data binding in AngularJS binds AngularJS expressions with AngularJS data. {{ f_name }} is bound with ng-model="f_name ".
Two ng-model directives :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Data Binding</title>
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
 
<body>
 
<div data-ng-app="">  
<h3>Two Way Data Binding</h3>
 
<strong>Number 1 :</strong> <input type="number" ng-model="num_1">  <br /><br />
<strong>Number 2 :</strong> <input type="number" ng-model="num_2">  <br /><br /><br />
<p><b>Addition :</b> {{num_1 + num_2}}</p>  
<p><b>Subtraction :</b> {{num_1 - num_2}}</p>  
<p><b>Multiplication :</b> {{num_1 * num_2}}</p>  
<p><b>Division :</b> {{num_1 / num_2}}</p>  
<p><b>Modulus :</b> {{num_1 % num_2}}</p>  
 
 
</div>  
 
</body>  
</html>  
Output :