AngularJs uses custom tags and attributes - called directives - to enhance html abilities. Meaning of each directive is described in angular documentation.

ngModel is a directive which is used as ng-model attribute on input elements. String set to that attribute becomes 'variable' accessible in that context. The value of that variable is bind to the value of input.

So creating <input ng-model="test"> will create test variable. All changes in input value will update test, and all change in test will update input. This feature is called 'two-way binding' and it's one of power features of angular.

We can access the same variable in other inputs, use it in script, or display it to user using {{variable}} syntax.


Bind the yourName variable used in the h1 element to the value of the input by using ng-model.

View Preview