Data binding in AngularJS is the synchronization between the model and the view.
AngularJS applications usually have a data model. The data model is a collection of data available for the application.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
The HTML container where the AngularJS application is displayed is called the view.
The view has access to the model, and there are several ways of displaying model data in the view.
You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
Use the ng-model directive to bind data from the model to the view on HTML controls (input, select, textarea)
Data binding in AngularJS is the synchronization between the model and the view.
When data in the model changes, the view reflects the change. Likewise, when data in the view changes (e.g., through user input), the model is automatically updated as well.
This happens instantly and automatically, ensuring that both the model and the view stay in sync at all times.
Applications in AngularJS are managed using controllers. You can learn more about them in the AngularJS Controllers chapter.
Because of AngularJS’s automatic synchronization between the model and the view, the controller logic can be completely separated from the view. This allows the controller to focus solely on managing the data (the model).
Thanks to AngularJS’s powerful two-way data binding, any changes made in the controller are instantly reflected in the view — without needing any extra code to update the UI.