Why is ng-bind and {{}} giving different outputs for a json?

Question

Here is the code that I am using, don't understand why is there 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 output that I am getting

//for ng-bind
[object Object]      

//for {{}}
{"foo":"ankur","bar":"23"}

Answer 1

The reason is that the {{}} is evaluating the expression before to bind it to the view, while ng-bind is not doing that, so you are having a string rapresentation of your array object.