Two-way data binding with an input field in AngularJS

Two-way data binding is one of the important features of AngularJS. Two-way data binding makes sure that changes in the data model are automatically reflected in the corresponding elements in the view. It also automatically updates the data model when the user makes changes to the related view.

<!DOCTYPE html> 
<html ng-app> 
<head> 
<meta charset="utf-8"> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head> 
<body>
<div> 
    <label>Number:</label> 
    <input type="text" ng-model="yourNumber"> 
    <hr> 
    <h1>The number you entered is {{yourNumber}}!</h1> 
</div>
 
</body>
</html>

Enjoyed this post? Share it!