Difference between ng-bind and interpolation {{}} in Angular [duplicate]

Question

Is there any difference between {{ }} and ng-bind in angular.

I am quite new to Angular. I started with using {{ }} and then in the documentation i find ng-bind. I think they do the same work but then why an extra directive, if not then please tell the difference.

Answer 1

There is some hint in the official docs: https://docs.angularjs.org/api/ng/directive/ngBind

Typically, you don't use ngBind directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading.

Answer 2

The most obvious difference between them is Flash of Unstyled content while using {{ ... }}.

However, there is a more subtle difference between the two if the object you pass to {{ obj }} and ng-bind="obj" is not a string.

From https://stackoverflow.com/a/19744728/987185 :

Depending on whether you use {{ ... }} or ng-bind syntax, the .toJSON and the .toString function on your object will be called to determine its representation.