One-way binding causes changes to the source property to automatically update the target property; however, changes to the target property are not broadcasted back to the source property. This type of binding is appropriate if the control that is bound is implicitly specified as read only. For instance, you may bind data to a source, such as a stock ticker, or perhaps your target property has no control interface provided for making changes.

In two-way binding, the changes will take place in either the source property or target property, which will update the other automatically. This kind of binding is suitable for HTML forms or other fully interactive user interface situations.

Platforms such as Rails, PHP, and JSP are able to develop the user interface by merging strings of HTML with data before showing the user interface to users. Libraries, such as jQuery, extend this model to the client side with the ability to update a part of the DOM separately instead of refreshing the full page. The full page can be refreshed by merging the hypertext markup language strings with data and then by inserting the result into the DOM by setting the inner HTML property. This all works practically; however, once you wish to insert new data into the UI or modify the data-supported user input, these platforms need to do quite a little bit of nontrivial work to get the data into the proper state within the HTML UI and into JavaScript properties. However, what if we do all this work without writing a single line of code? What if we simply declare the HTML elements (directive) and map them to the JavaScript properties and have them correct themselves automatically? This kind of programming is known as data binding.

Data binding in AngularJS has various functions. These functions are linked with $scope. A $scope is an execution context for an expression, which we write in HTML. $scope contains variables, so an expression accesses the variables from an ancestor scope from the tree. We will discuss $scope in detail in Chapter 3, AngularJS Scopes, Controllers and Filters. Data binding functions fire event handlers automatically when a variable gets changed by a button's click.

AngularJS's data binding provides automatic synchronization of data between the model and view. In the application, AngularJS treats the model as a single source of information, while a view displays the model data. Whenever the model changes, the view will get updated to reflect the change in the data and vice versa, as shown in the following figure:

One-way data binding in AngularJS

All the custom HTML attributes that are specific to AngularJS are known as directives and have specific roles in the application. An HTML page is a template. It is not the final version that the user will see. The value can be different from what will be rendered by the browser. The following code is an example of one-way data binding:

<divng-app="myApp"ng-init="firstName = 'John'; lastName = 'Smith';">
<strong>First name:</strong><span>{{firstName}}</span><br />
<strong>Last name:</strong><span ng-bind="lastName"></span>
</div>

In the preceding code:

• The ng-app directive marks the <div></div> element that contains the AngularJS application.
• Using the ng-init directive, the firstName and lastName variables are initialized. For example, ng-init="firstName = 'John'; lastName = 'Smith';".
• Data binding can be specified in two different ways:
  • With curly braces: {{expression}}
  • With the ng-bind directive: ng-bind="varName"

The preceding code is an example of one-way data binding because the model values (the firstName and lastName variables) are automatically assigned to the <span> tag through the {{}} data binding notation or the ng-bind directive. However, the value of <span> does not change in the model (one-way binding).

The following figure shows the output of the preceding code:

<div ng-init="firstName = 'John'; lastName = 'Smith';">
<strong>First name:</strong> {{firstName}}<br />
<strong>Last name:</strong><span ng-bind="lastName"></span>
<br />
<label>Set the first name: <input type="text" ng-model="firstName" /></label>
<br />
<label>Set the last name: <input type="text" ng-model="lastName" /></label>
</div>