AngularJS : Why ng-bind is better than {{}} in angular?

Visibility:

While your angularjs is bootstrapping, the user might see your placed brackets in the html. This can be handled with ng-cloak. But for me this is a workaround, that i don't need to use, if i use ng-bind.

Performance:

The {{}} is much slower.

This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.

The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it's not necessary.

I am currently building a big single page app (~500 bindings per view). Changing from {{}} to strict ng-bind did save us about 20% in every scope.$digest.

Suggestion:

If you use a translation module such as angular-translate, always prefer directives before brackets annotation.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

If you need an filter function, better go for a directive, that actually just uses your custom filter. Documentation for $filter service

UPDATE 28.11.2014 (but maybe off the topic):

In Angular 1.3x the "bindonce" functionality got introduced. Therefore you can bind the value of an expression/attribute once (will be bound when != 'undefined').

This is useful, when you dont expect your binding to change.

Usage: Place "::" before your binding:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Example:

ng-repeat to output some data in the table, with multiple bindings per row. Translation-bindings, filter outputs, which get executed in every scope digest.

ng-bind is better than {{...}}

For example, you could do:

<div>
  Hello, {{variable}}
</div>

This means that the whole text Hello, {{variable}} enclosed by <div> will be copied and stored in memory.

If instead you do something like this:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Only the value of the value will be stored in memory, and angular will register a watcher (watch expression) which consists of the variable only.

Basically the double-curly syntax is more naturally readable and requires less typing.

Both cases produce the same output but.. if you choose to go with the double-curly there is a chance that the user will see for some milisecs the {{}} before your template rendered by angular. So if you notice any {{}} then is better to use ng-bind.

Also very important is that only in your index.html of your angular app you can have un-rendered {{}}. If you are using directives so then templates, there is no chance to see that because angular first render the template and after append it to the DOM.

This is because with {{}} angular compiler considers both the text node and it's parent as there is a possibility of merging of 2 {{}} nodes. Hence there are additional linkers that add to the load time. Of course for a few such occurrences the difference is immaterial, however when you are using this inside a repeater of large number of items, it will cause an impact in slower runtime environment.

ng-bind has its problems too.When you try to use angular filters, limit or something else, you maybe can have problem if you use ng-bind. But in other case, ng-bind is better in UX side.when user opens a page, he/she will see (10ms-100ms) that print symbols ( {{ ... }} ), that's why ng-bind is better.