Two Way Data Binding In AngularJS

Anoop Kumar Sharma
Jan 31, 2016
12.1k
0
1
Article

In this article, we will learn two-way data binding in AngularJS. In the previous AngularJS articles you may have read the following articles:

What is Two way Data binding in AngularJS

One of the core feature of AngularJS which makes it popular is two way data binding. In two way data binding, any changes to the model are immediately reflected in the View and any changes in the View updates the model.

Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Script/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.name = "Anoop";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Enter Name:<input type="text" ng-model="name" />
<p>Hello! {{name}}
</div>
</body>
</html>

In above code, we have created a controller (i.e. myController) and registered it with myApp module. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template. If we change the value in Textbox then it will update the model or if we change the value of model then it will immediately update the View.

Preview: