AngularJS | Two-Way Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application.

Find the below the example, I've bind the fName and lName model variables to a couple of form input elements. When the page is loaded, the input elements are initialized to those of the respective model variables and whenever the user types something in an input, the value of the model variable is modified as well (two way).

In this example I've used ng-show and ng-hide for show/hide preview based on input fields values.

Two-way data binding

shanidkv's picture