AngularJS Expressions
Learn how AngularJS expressions, written inside double curly braces, evaluate JavaScript-like code and insert the result directly into the page.
What Are AngularJS Expressions?
An AngularJS expression is a snippet of code placed inside double curly braces, like {{ 1 + 2 }}. AngularJS evaluates it against the current scope and writes the result into the HTML, updating automatically whenever the underlying data changes.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>{{ 5 + 5 }}</p>
<p>{{ 10 % 3 }}</p>
</div>
</body>
</html>Expressions Work with More Than Numbers
Expressions can read strings, look up object properties, index into arrays, and combine several scope variables in one line — much like a small piece of JavaScript, evaluated in the context of the current scope.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="person={firstName:'Ada', lastName:'Lovelace'}">
<p>{{ person.firstName + ' ' + person.lastName }}</p>
<p>{{ person.firstName.length > 2 }}</p>
</div>
</body>
</html>How Expressions Differ from Plain JavaScript
- Expressions are evaluated against the AngularJS scope, not the global window object
- They cannot contain control-flow statements like if, for, or while — only single expressions
- A reference to an undefined variable quietly evaluates to undefined instead of throwing an error
- Expressions can appear both inside {{ }} and as the value of directive attributes, such as ng-model or ng-repeat
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="score=72">
<p ng-if="score >= 50">You passed with {{ score }} points.</p>
</div>
</body>
</html>Note: Because expressions live inside HTML attributes, keep them short and simple — a comparison, a property lookup, basic arithmetic. Anything more complex (loops, multi-step logic) belongs in a controller function, not directly in the markup.
Note: You have already been using expressions beyond {{ }} throughout this tutorial: score >= 50 in ng-if, t in tasks in ng-repeat, and quantity=5 in ng-init are all AngularJS expressions evaluated against the scope.
Exercise: AngularJS Expressions
How do AngularJS expressions handle undefined or null values differently from plain JavaScript?
