AngularJS text box data binding

Simple Data Binding

This is a simple example of AngularJS's ability to data bind text entered into a text box immediately to another location on the page. No need to use jQuery to setup functions for the on change event to update the text.

• ng-app defines an AngularJS application. If you are not using any modules like this example, then do not assign the AngularJS application a name so you can use everything in-line.
• ng-model is added to an input, select, or textarea to capture text changes.
• ng-bind designates the element where the changes made in an ng-model are bound.

is automatically updated here by AngularJS in line using curly brackets: {{page.test}}

is automatically updated here by AngularJS ng-bind attribute on a span:

Object dot binding

The model names should follow the dot pattern where the first part represents an instance of a model or list of models such as a person or list of persons followed by properties. The dot technique also used to be used in AngularJS 1.2 to make these objects global between controllers but was removed in version 1.3 so scope is now consistently local to the controller now. See Migrating from 1.2 to 1.3 for more information.