How Data Binding works in AngularJS?

In AngularJS, data binding is synchronization of data between the model and the view. The model in AngularJS act as a single-source-of-truth. The view is the projection of the model at all times.

AngularJS has two-way data binding. At 1st, the template (uncompiled HTML) is compiled on the browser. The compilation of the template produces a live view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

data binding

That is why the view is just the projection of the model and the controller is completely separated from the view and unaware about the data-binding. This makes it easy to test the controller in isolation of view and any related DOM dependency.

Leave a Reply