Why does Angular offer these two different syntax? What is the difference between the two?

2 Answers

You can insert the dynamic values using the Angular expressions. They are JavaScript-like code snippets which are written inside double braces.

<p>Name: {{emp.firstName}}</p>

They bind the app data to HTML the same way as the ng-bind directive. Angular outputs the data exactly where the expression is used.

ng-bind can also be used to set the text of a DOM element to the value of an expression.

<p>Name: <span ng-bind="emp.firstName"></span></p>

In this example, Angular replaces the text content of the HTML element with the value of emp.firstName expression. Any changes to the employee.firstName expression in the application's scope are also reflected instantly in the DOM by Angular.

ng-bind is about twice as fast as {{}} expression bind. ng-bind places a watcher on the passed expression and therefore the ng-bind only applies, when the passed value actually changes. On the other hand, the {{}} brackets is dirty checked and Angular refreshes the value after every $digest, even if the value changes or not.

There is one more difference.

You can specify the numerical operations directly within the expression syntax.

<p>Salary : ${{basic + travelAllowance + houseRent}}</p>

But if you are using ng-bind, you need to invoke a JavaScript function like calculateSalary() which in turn does the numerical calculation for you.

<p>Salary: <span ng-bind="calculateSalary(basic, ...)"></span></p>