Difference between two angular js bindings?

Question

I've two codes in my HTML structure.

First one is:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app>
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

and another is:

<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-app>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Both are giving the same output then, where the difference lies?

score 0 · Answer 1 · edited May 23 '17 at 11:51

When you are using

<p>{{name}}</p>

While angularjs is loading, you might see your brackets on the page. You can use ng-cloak to avoid the user to see the {{name}}.

Its better to use

<p ng-bind="name"></p>

As this removes the problem. the ng-bind will show the value,only when the value is changed. There are so many explanations for the difference you can check

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

Difference between ng-bind and interpolation {{}} in Angular

score 0 · Answer 2 · answered Aug 01 '15 at 09:18

The similarity between this two is

Used for one way binding.

they are used to bind variables on data on view.

Interpolation Directive

This uses {{}} inside that you can have an expression with scope variables which are placed in respective scope..

ng-bind

Sometimes angular shows {{}} while rendering a page which is un-compiled angular content, ng-bind does avoid that. By using this you need use to add using ng-cloak directive.

Difference between two angular js bindings?

2 Answers2