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.
Angular follow three types of Data-binding method:
One-Way Data Binding
The one-way data binding is an approach where data flow from the data model ($scope) to view. There is no way to update model from view. It is used in classical template systems. These systems bind data in only one direction. Usually performed through “ng-bind” or evaluation expression.
Note ng-bind directive work with non-input type element like text, email, radio and select etc. The ng-bind work with an element like div, paragraph, span and we can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
Two-way data Binding
The ng-model directive binds the value of HTML controls (input, select, text area) View to Model in controller application data. The binding goes both direction model to view and view to model. If the user changes the value inside the input field, the AngularJS change the corresponding model will also change its value.
In the example, we are using the model to bind user first and last name into one full name. We can achieve this with help of ng-model, ng-bind and ng-click.
In AngularJS, data gets transferred from model to view only one time. Ones the change happen in mode, it won’t impact on view again and again.
Data always flow from model to view or scope to view
Data populated only once
Data doesn’t travel from view to model
Rendering the one-time data view can be accomplished using: :[double colon] special character