Angularjs data binding

AngularJS has a powerful two-way data binding feature that allows changes made to a model to be automatically reflected in the view and vice versa. This means that changes made to the user interface elements are propagated to the underlying model, and changes made to the model are immediately displayed in the view.

AngularJS uses the ng-model directive to create a two-way binding between a model and an HTML input element. The ng-model directive binds the value of the input element to a property on the scope, which represents the model.

Here's an example of how to use the ng-model directive:

<input type="text" ng-model="name">
<p>Hello {{name}}!</p>

In this example, we have an input field and a paragraph element. The input field is bound to the "name" property on the scope using the ng-model directive. When the user types something into the input field, the value is automatically updated in the "name" property of the scope. This, in turn, updates the text in the paragraph element to greet the user by name.

AngularJS also supports one-way data binding using the {{ }} syntax. This syntax allows you to bind a property of the scope to an HTML element. The property value will be interpolated into the HTML element when the page is rendered. However, one-way data binding does not update the model automatically when changes are made to the view.

Here's an example of one-way data binding:

<p>My name is {{name}}</p>

In this example, we are binding the value of the "name" property on the scope to the text inside the paragraph element. The value of "name" is interpolated into the paragraph element when the page is rendered, but changes made to the paragraph element will not update the "name" property of the scope.