Why do ng-bind and {{}} give different outputs for json?

Question

Here is the code I use, I don’t understand why there is a difference in the output of ng-bind and {{}} .

 angular.module('Test', []); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="Test"> <input type="text" ng-model="foo.bar" /> <input type="text" ng-model="foo.baz" /> <p ng-bind="foo"></p> <p>{{ foo }}</p> </div> 

This is the result that I get

 //for ng-bind [object Object] //for {{}} {"foo":"ankur","bar":"23"} 

Answer 1

The reason is that {{}} evaluates the expression before binding it to the view, and ng-bind does not, so you have a string representation of your array object.