In this article I will explain a simple tutorial with an example, what is Two way Databinding in AngularJS.
This article will explain an example of Two way Databinding in AngularJS using ng-bind directive and Templates.
Two way Databinding in AngularJS
In AngularJS Two way Databinding, the Model and View are synchronized. In other words when the Model data changes, the change is reflected in the View while when the View changes, the Model is updated.
AngularJS ng-bind and Template
ng-bind
This directive binds the model value to the HTML element.
Template
Templates are wrapped within curly braces {{ }}. It is used to bind expressions to HTML.
AngularJS: Two way Databinding Tutorial with example
Following is a simple example to display data using ng-bind and templates in AngularJS. In this example, I have set the ng-model directive for the TextBox.
There are two HTML SPAN elements of which one is set with a template expression while other is specified with the ng-bind directive.
As we type in the TextBox, both the HTML SPAN elements display the value of the TextBox dynamically and that too without writing a single line of JavaScript code.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="">
UserName :
<input type="text" ng-model="UserName">
<hr />
Hello <span>{{UserName}}</span>
<br />
Hello <span ng-bind="UserName"></span>
</div>
</body>
</html>
Screenshot
![AngularJS: Two way Databinding Tutorial with example]()
Demo
Downloads
