AngularJS ng-model Directive
Understand how ng-model binds an input element's value to a scope variable and keeps the view and data in sync in both directions.
What ng-model Does
The ng-model directive binds the value of an HTML form element — such as an <input>, <select>, or <textarea> — to a variable on the AngularJS scope. This creates two-way data binding: changes typed into the field update the variable, and changes to the variable update the field.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You typed: {{ name }}</p>
</div>
</body>
</html>Two-Way Binding in Action
Because the binding works both ways, two separate elements bound to the same ng-model always stay in sync. Typing in either input immediately updates the other, since both are simply reading and writing the same scope variable.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Input 1: <input type="text" ng-model="message"></p>
<p>Input 2: <input type="text" ng-model="message"></p>
<p>Message is: {{ message }}</p>
</div>
</body>
</html>ng-model on Other Form Elements
ng-model is not limited to text inputs. It works with checkboxes, radio buttons, select dropdowns, and textareas, automatically using the right kind of value for each — a boolean for checkboxes, a string for radio groups, and so on.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p><input type="checkbox" ng-model="isAgreed"> I agree</p>
<p>Agreed: {{ isAgreed }}</p>
<select ng-model="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<p>Chosen color: {{ color }}</p>
</div>
</body>
</html>
