Over a million developers have joined DZone.

What is 2 way binding in Angular.js

DZone's Guide to

What is 2 way binding in Angular.js

· Java Zone ·
Free Resource

Verify, standardize, and correct the Big 4 + more– name, email, phone and global addresses – try our Data Quality APIs now at Melissa Developer Portal!

Many developers name 2 way binding as the main advantage of Angular.js framework. So what 2 way binding actually is and how it helps Angular.js framework to deliver better experience?

1 way data binding

The below images explain the difference quite well.

In MVC (model, view & controller) world 1 way data binding happens when controller generates view by merging model and view template. This process happens once and generated view is then sent to the client application. Once client application receives rendered view there is no easy way to automatically update this view if model data changes.

View is only regenerated once user refreshes the the app screen / page with current view. Or navigates to another application page.

1 way data binding MVC2 way data binding MVC Angular.js

2 way data binding

2 way dat binding uses a different approach.

The view is generated from the template and is constantly sync’ed up with any changes in the data model receives. Also once the view changes (mostly because of application user interactions) model gets updated with new data as required instantly.

This way application user doesn’t have to refresh or reload the page in order for user to see the data changes. From the users perspective view changes happen near real time.

The main requirement for this – all this process has to happen on the application client side.

This is the main reason Angular.js framework supports 2 way data binding very well. It runs on the client application side and can constantly run the synch / refresh between what app users see and any data changes on the model side.

*Images are taken from Angular.js docs site

Developers! Quickly and easily gain access to the tools and information you need! Explore, test and combine our data quality APIs at Melissa Developer Portal – home to tools that save time and boost revenue. 


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}