The ngModel directive binds an input, select, textarea to a property on the scope using NgModelController. One can also bind same property on multiple input elements. Few points to note:
- Change initiated from one input will propagate to all other places.
- Change can also be initiated by modifying scope variable in Javascript.
<div ng-app="myApp">
<label>Name:</label>
<input type="text" ng-model="yourName" ng-init="yourName='Rahul Gupta'">
<input type="text" ng-model="yourName">
<p>Hello {{yourName}}!</p>
<label>City:</label>
<input type="text" ng-model="yourCity">
<p>in city {{yourCity}}!</p>
<div/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript">
var module = angular.module("myApp", []);
module.run(['$rootScope', function($rootScope){
$rootScope.yourCity = 'Bangalore';
}]);
</script>
