AngularJS Built-in directives ngModel


Example

With ng-model you can bind a variable to any type of input field. You can display the variable using double curly braces, eg {{myAge}}.

<input type="text" ng-model="myName">
<p>{{myName}}</p>

As you type in the input field or change it in any way you will see the value in the paragraph update instantly.

The ng-model variable, in this instance, will be available in your controller as $scope.myName. If you are using the controllerAs syntax:

<div ng-controller="myCtrl as mc">
    <input type="text" ng-model="mc.myName">
    <p>{{mc.myName}}</p>
</div>

You will need to refer to the controller's scope by pre-pending the controller's alias defined in the ng-controller attribute to the ng-model variable. This way you won't need to inject $scope into your controller to reference your ng-model variable, the variable will be available as this.myName inside your controller's function.