AngularJS Expressions

Last Updated : 11 Jul, 2025

In this article, we will see the Expressions in AngularJS, along with understanding their implementation through the examples.

Expressions in AngularJS are used to bind application data to HTML. The expressions are resolved by AngularJS and the result is returned back to where the expression is written. The expressions in AngularJS are written in double braces: {{ expression }}. They behave similar to ng-bind directives: ng-bind="expression".

Syntax:

{{ expression }}

Example 1: This example displays the name that we feed in the ng-init directive.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> <title>AngularJS Expression</title> </head> <body style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>AngularJS Expressions</h3> <div ng-app="" ng-init="name='GeeksforGeeks'"> <p> {{ name }} is a portal for geeks.</p> </div> </body> </html>

Output:

Example 2: This example displays the content of the object that we feed in the ng-init directive.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> <title>AngularJS Expression</title> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3>AngularJS Expressions</h3> <div ng-app="" ng-init="sort={one:'quick sort',  two:'merge sort',  three:'bubble sort'}"> <p> Sorting Algorithms:</p> <ul> <li>{{ sort.one }}</li> <li>{{ sort.two }}</li> <li>{{ sort.three }}</li> </ul> </div> </body> </html>

Output:

Example 3: This example illustrates the implementation of the objects with the Expression in AngularJS.

HTML

<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3 style="color:green"> AngularJS Expressions </h3> <div ng-app="" ng-init="data={Course:'AngularJS',  topic:'Expression'}"> <p>This is <span ng-bind="data.Course"></span> <span ng-bind="data.topic"></span> Tutorial </p> </div> </center> </body> </html>

Output:

Difference between AngularJS Expression & Javascript Expression:

Parameters	Angularjs Expression	JavaScript Expression
Context	Angular expressions are evaluated against a scope object.	JavaScript expressions are evaluated against the global window.
Forgiving	In Angular, expression evaluation is forgiving to undefined and null.	JavaScript expression tries to evaluate undefined properties and generates ReferenceError or TypeError.
Control Flow Statements	Control flow statements cannot be used in angularjs expressions, i.e, loop, conditional, or exception	Control flow statements can be used in JavaScript expressions
Function Declarations	Angular Expressions do not allow function declaration, not even inside the ng-init directive.	The function declaration is allowed in JavaScript expressions
Bitwise, Comma, And Void Operators	In an Angular expression, Bitwise or void operators cannot be used.	You can use Bitwise, or void operators in a JavaScript expression.
Filter	Angular expressions can work with filter	JavaScript expressions do not work with filter
One time binding	One-time binding is supported by AngularJS. To create one-time binding use :: expression.	JavaScript expressions do not allow one-time binding.