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.