How many types of data bindings in AngularJS ?
Last Updated :
09 May, 2022
In this article, we will know about the concept of data binding, along with different types of binding available in AngularJS.
The Data Binding refers to the synchronization of data between the model and view. Synchronizing data is imperative for keeping the data being displayed to the user and the data being stored updated at all times. In AngularJS, Data Binding is an important concept as it acts as a bridge between the view and the logic of the AngularJS app. Data Binding In AngularJS is achieved by using Directives.
There are 2 major components of Data Binding in AngularJS:
- Model: It is responsible for maintaining data in the application.
- View: It is the HTML container where the app is displayed to the user.
AngularJS provides two types of Data Binding:
- One-way data binding
- Two-way data binding
We will discuss both of them in detail with examples.
One Way Data Binding: In one-way data binding, the flow of data is in one direction only i.e. from model to view. A value is taken from the data model, inserted in an HTML element, and displayed to the user. But there is no way to update the model according to the input given by the user which means that the data can’t flow from the view to the model.
One-Way Data Binding can be achieved by:
- Interpolation
- Using ng-bind directive
Interpolation: Interpolation is a one-way data-binding technique that is used to transfer the data from a TypeScript code to an HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view.
Syntax:
{{expression}}
Example: This example describes the One-way data binding using double braces expressions.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Data Binding Example</ title >
< script src =
</ script >
</ head >
< body ng-app = "myApp" >
< div ng-controller = "myCtrl" >
< h1 >{{title1}}</ h1 >
< h2 >{{title2}}</ h2 >
< p >{{description}}</ p >
</ div >
< script type = "text/javascript" >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title1 = "GeeksforGeeks";
$scope.title2 = "AngularJs Data Binding";
$scope.description ="Data Binding refers "
+ "to the synchronization of data "
+ "between the model and view";
});
</ script >
</ body >
</ html >
|
Explanation: In the above example, we have used expressions to bind the data from the model to the view. In the <script> tag we have created a module named “myApp”. To this module, we have added a controller “myCtrl”. We have added properties to this controller like title1, title2, and description. Then we have specified these properties in the HTML elements where we want to show the data to the users.
Output:
Using ng-bind directive: The ng-bind Directive in AngularJS is used to bind/replace the text content of any particular HTML element with the value that is entered in the given expression. The value of specified HTML content updates whenever the value of the expression changes in ng-bind directive.
Syntax:
<element ng-bind="expression"> Contents... </element>
Example: This example describe the One-way data binding using ng-bind directive.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Data Binding Example</ title >
< script src =
</ script >
</ head >
< body ng-app = "myApp" >
< div ng-controller = "myCtrl" >
< p >Firstname:
< span ng-bind = "firstname" ></ span >
</ p >
< p >Lastname:
< span ng-bind = "lastname" ></ span >
</ p >
</ div >
< script type = "text/javascript" >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstname = "GeeksforGeeks";
$scope.lastname = "AngularJS";
});
</ script >
</ body >
</ html >
|
Explanation: In the above example, we have used ng-bind to bind data from the model to the view. In the <script> tag we have added properties to the controller like firstname and lastname. We have specified the ng-bind directive in the HTML tags where we want to display the data. In the ng-bind directive, we have specified the property we want to display.
Output:

Data Binding using the ng-bind directive
Two Way Data Binding: In this type of data binding, the flow of data is bidirectional i.e the data can flow from the model to the view as well as from the view to the model. In simple words, we can say that when the data in the model changes, the changes are reflected in the view and when the data in the view changes the model is also updated. The view and model are updated at all times.
Two-way data binding is achieved by using the ng-model directive. The ng-model directive transfers data from the controller to the view and vice versa.
Example: In this example, we have created a form asking for the user’s name, age, and the course they are interested in. After the user gives the input for all the fields and clicks on the submit button the details entered by the user are displayed.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Data Binding Example</ title >
< script src =
</ script >
</ head >
< body ng-app = "myApp" >
< div ng-controller = "myCtrl" >
< form >
< label >Enter your name:</ label >
< input type = "text" ng-model = "name" >
< br >
< label >Enter your age:</ label >
< input type = "number" ng-model = "age" >
< br >
< label >Enter the course you are interested in:</ label >
< input type = "text" ng-model = "course" >
< br >
< input type = "submit" ng-click = "details()" >
</ form >
< div ng-show = "showdetails" >
< h1 >Details entered by the user:</ h1 >
< p >Name: {{name}}</ p >
< p >Age: {{age}}</ p >
< p >Course: {{course}}</ p >
</ div >
</ div >
< script type = "text/javascript" >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.showdetails = false;
$scope.details = function() {
$scope.showdetails = true;
}
});
</ script >
</ body >
</ html >
|
Explanation: We have specified the ng-model directive in all the input fields so as to create a model property for each of them. Initially in the controller, the value for the property “details” is false. After the submit button is clicked, the function details() is called which changes the value of the property “details” to true. In the <div> tag we have specified the ng-show directive which shows the <div> tag if the value of “details” is true. So as the user enters the details and clicks on the submit button the details are displayed using expressions.
Output:

Two Way Data Binding Example
Example: In this example, the user is supposed to enter the quantity for each product they want to order, and accordingly the price will be calculated and displayed to the user.
HTML
<!DOCTYPE html>
< html >
< head >
< title >>Data Binding Example</ title >
< script src =
</ script >
< style >
table {
border: 1px solid black;
border-collapse: collapse;
}
tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</ style >
</ head >
< body ng-app = "myApp" >
< div ng-controller = "myCtrl" >
< table >
< tr >
< th >Food Items</ th >
< th >Price</ th >
< th >Quantity</ th >
</ tr >
< tr >
< td >Pizza</ td >
< td >100</ td >
< td >
< input type = "number"
ng-model = "pizza" >
</ td >
</ tr >
< tr >
< td >Pasta</ td >
< td >150</ td >
< td >
< input type = "number"
ng-model = "pasta" >
</ td >
</ tr >
< tr >
< td >Garlic Bread</ td >
< td >170</ td >
< td >
< input type = "number"
ng-model = "garlicbread" >
</ td >
</ tr >
< tr >
< td >Nachos</ td >
< td >200</ td >
< td >
< input type = "number"
ng-model = "nachos" >
</ td >
</ tr >
< tr >
< td >Ice Cream</ td >
< td >250</ td >
< td >
< input type = "number"
ng-model = "icecream" >
</ td >
</ tr >
</ table >
< br >
< button ng-click = "calculate()" >
Place Order
</ button >
< div ng-show = "amt!=0" >
< h1 >
Total amount to be paid: {{amt}}
</ h1 >
</ div >
</ div >
< script type = "text/javascript" >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "Food ordering";
$scope.amt = 0;
$scope.calculate = function() {
$scope.amt = 100 * $scope.pizza
+ 150 * $scope.pasta
+ 170 * $scope.garlicbread
+ 200 * $scope.nachos
+ 250 * $scope.icecream;
}
});
</ script >
</ body >
</ html >
|
Explanation: In the above example, we have used data binding in order to take data from the user from the view, pass it to the controller, the controller performs the processing using the model properties and then passes it to the view for the data to be shown to the users.
Output:

Similar Reads
Two-way Data Binding in AngularJS
In this article, we will see the Data Binding, along with understanding how the flow of code is from a Typescript file to an HTML file & vice-versa through their implementation. In AngularJS, Data Binding refers to the synchronization between the model and view. In Two-way data binding, the flow
3 min read
AngularJS Data Binding
In this article, we will see the Data Binding in AngularJS, along with understanding the various types of Data Binding available with their implementations. Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a
4 min read
How to achieve Two-Way Data Binding in Angular with ngModel ?
Two-way Data Binding in Angular allows you to automatically synchronize data between a component class property and an input element (e.g., an input field) in your template. To achieve this binding, it's typically used with Angular [(ngModel)] Â directive. This is basically the combination of the Pro
3 min read
How to share data between controllers in AngularJS ?
The task is to share data variables between two or more controllers by using AngularJS. There are many procedures to achieve this. Here we will discuss the most popular ones. Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Her
3 min read
Building Template-Driven Form in Angular
In Template Driven Forms we specify behaviors/validations using directives and attributes in our template and let it work behind the scenes. All things happen in Templates hence very little code is required in the component class. This is different from the reactive forms, where we define the logic
4 min read
Style Binding in Angular 17
In Angular, creating visually appealing and dynamic user interfaces is important for delivering an engaging user experience. One such powerful feature is Style Binding. It allows you to dynamically apply CSS styles to HTML elements based on component data or expressions. In this article, we'll explo
2 min read
How to Store Data in Local Storage using AngularJS ?
Angular JS is a typescript-based web application framework. It is supported by the Angular team of Google and open-source developers. It is a component-based framework allowing the developers to reuse the components created. It is well-suited for large and complex applications because of its well-de
5 min read
Binding Syntax In Angular
In Angular, binding syntax lets you determine the channel of data transmission between the component class and the template. Among various types of bindings supported by Angular are interpolation, property binding, event binding, and two-way-data-binding. Therefore, it is important to understand var
3 min read
Property binding in angular 8
Property Binding is a one-way data-binding technique. In property binding, we bind a property of a DOM element to a field which is a defined property in our component TypeScript code. Actually, Angular internally converts string interpolation into property binding. In this, we bind the property of a
2 min read
How to fetch the details using ng-repeat in AngularJS ?
In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angul
2 min read