Two Way Data Binding In AngularJS




In AngularJS, Two way databinding will make the Model and View in sync all time.

1. That means any change in the model will updates the View.
2. Any change in the View will updates the Model.

Two Way Data Binding In AngularJS, Model View DataBinding In AngularJS, AngularJS, DataBinding In AngularJS Model View, What Is, JavaScript, Jquery, Google




Lets start with one example here.

Two Way Data Binding In AngularJS, Model View DataBinding In AngularJS, AngularJS, DataBinding In AngularJS Model View, What Is, JavaScript, Jquery, Google

Two Way Data Binding In AngularJS, Model View DataBinding In AngularJS, AngularJS, DataBinding In AngularJS Model View, What Is, JavaScript, Jquery, Google

In the above example, inside controller the model object is dataholder. It is bind with data "Welcome To Technomark.In". On View, the output of dataholder will be shown. Above that on View, there is a textbox placed.

Any change in the textbox updates the dataholder. That means, any change in the View updates the Model. And any chaneg in the Model updates the View. This is becuase, the textbox is attached with directive ng-model. It is responsible for updating the model back from View.