Data binding is synchronization of data between the model and view components.
In Angular, model treat as source of application and view is the projection of angular model.
There are two type of data binding in Angularjs they are:
1. One-Way data binding
2. Two-Way data binding.
In One-way data binding view ( i.e UI part) not updates automatically when data model changed and we need to write custom code to make it updated every time and it is not a synchronization processes.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
AngularJs Two Binding Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angulartwobindapp', []);
app.controller('angulartwobindingCtrl', function ($scope) {
$scope.name = 'Welcome to Edureka.com';
});
</script>
</head>
<body ng-app="angulartwobindapp">
<div ng-controller="angulartwobindingCtrl">
<p>
Message: {{ name }}
</p>
</div>
</body>
</html>
In Two-way data binding, view (UI part) updates automatically when data model changed. It is a synchronization processes.
<!DOCTYPE html>
<html xmlns="http://www.edureka.co/">
<head>
<title>
AngularJs Two Binding Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angulartwobindapp', []);
app.controller('angulartwobindingCtrl', function ($scope) {
$scope.name = 'Welcome to Tutlane.com';
});
</script>
</head>
<body ng-app="angulartwobindapp">
<div ng-controller="angulartwobindingCtrl">
Enter Name : <input type="text" ng-model="name" style="width:250px" />
<p>
Entered Name: {{ name }}
</p>
</div>
</body>
</html>
