AngularJS model

The ng-model Directive

Using the ng-model directive, you can link the value of an input field to a variable defined in AngularJS.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
</div>

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.name = “John Doe”;
});
</script>

Two-Way Binding

The binding is bidirectional; when the user modifies the value in the input field, the corresponding AngularJS property will also update to reflect that change.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>
Name: <input ng-model=”name”>
<h1>You entered: {{name}}</h1>
</div>