Expressions in Angularjs

Prev Tutorial Next Tutorial


AngularJS Expressions used to binds application data to HTML. AngularJS expressions are written inside double curly braces such as : {{ expression }}. Angularjs Expressions behave same like to ng-bind directives. AngularJS expressions are pure JavaScript expressions and output of the data display where they are used.

Sample Example of AngularJS Expressions



First Number
Second Number

Sum: {{num1 + num2}}

Sub: {{num1 - num2}}

Mul: {{num1 * num2}}

Div: {{num1 / num2}}


<!DOCTYPE html>
<html lang="en">
<div ng-app="" ng-init="num1=10; num2=1">

First Number  <input type="number" ng-model="num1"><br>
Second Number <input type="number" ng-model="num2">

<p><b>Sum:</b> {{num1 + num2}}</p>
<p><b>Sub:</b> {{num1 - num2}}</p>
<p><b>Mul:</b> {{num1 * num2}}</p>
<p><b>Div:</b> {{num1 / num2}}</p>

<script src=""></script>

Note: when you remove the ng-app directive, Html will display the expression as it is, without solving it.

Use Expression for String


<div ng-app="" ng-init="firstName='Harry'; lastName='Porter';">

<p>Full Name: {{firstName + " " + lastName }}</p>

Use Expression for Array


<div ng-app="" ng-init="array=[10,15,20,25,30]">
<p>Second Element is {{ array[1] }}</p>

Example using ng-bind for String


<!DOCTYPE html>
<script src= ""></script>

<div ng-app="" ng-init="firstName='Harry'; lastName='Porter';">
<p>Full Name:  <span ng-bind="firstName + ' ' + lastName"></span></p>


Prev Tutorial Next Tutorial

Download Projects

Google Adsense Advertisements
Free Classified Site – Bedpage

Yahoo Advertisements