Angularjs Two Way Data BindingNovember 27, 2015January 8, 2016admin

In the series of this tutorials, we would discuss aboutAngularjs Two-Way-Data Binding (TWD).

Data-Binding: – TWD (two-way data binding) main approach is Automatic synchronization of data between model and view components.

The model treat as a dual character, like model variable bound to html element that can change and display the values of the variables, and the views are the projectors of the models. When the model adds or changes, the reflection will show in view.

Please have look into the below demo, when you’re going to enter or change the value in the input box, synchronously data (first name and last name) will update in the html elements.

Two-Way-Data-Binding-Basic Demo

Input something in the input box:

Enter Your First Name :

Enter Your Last Name :

Hello {{ firstName }} {{ lastName }}

Why angularjs Two-Way-data-binding

Here we have basic beginner level example of Two-Way-Data binding, to show first name and last name in the two div elements, we used ng-model directive to bind a model variables to html elements, that is not only to enter also to change the value.

Two-Way-data-Binding-Basic Demo code

Angularjs Traditional approach


Traditional approach, way is completely different then two way data binding. This will allows for a model or view to be updated ONCE from the value set by the controller depends upon the first digest cycle.