Angular JS series – The Magic of AngularJS Two-way Data Binding

In a previous AngularJS introduction article we have seen some conceptual introductory material about the AngularJS framework.

Let’s proceed with one of main features that AngularJS provides … Two-way Data Binding.

About data binding

Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. The way that AngularJS implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. https://docs.angularjs.org/guide/databinding

Data binding is the most useful and powerful feature among any of the existing or upcoming webdevelopment technologies.
It’s actually a process that bridges a connection between the view and business logic of the application.
AngularJS can follow a Two-Way data binding model, where changes on the business logic trigger view updated, and vice versa…

Two-Way Data Binding

Simply stated … Two-Way Data Binding is when the model reflects changes to the view, and vice versa. Two-way bindings in AngularJS are created with the ng-model directive.

We can achieve a two-way data binding using the AngularJS ng-model directive.
If we use the ng-model directive inside our html syntax it will automaticcally update the model upon update through the view, or update on the model itself.

Example

Following example illustrates that changes in the input fields trigger changes on the model… and how changes on the model reflect to the view…