Why would ng-bind work, where {{}} is not

Question

If I have in my controller something like:

...
 $scope.arr = ["orange", "apple", "pear"];
...

Why would the following work:

...
<li data-ng-repeat="item in arr">
  <span data-ng-bind="item"></span>
</li>
...

Output (as expected):

orange
apple
pear

And this not work:

...
<li data-ng-repeat="item in arr">
  <span>{{item}}</span>
</li>
...

Output:

According to the documentation, they should both work the same, no?

EDIT:

Looks like it does work. Any common issues that might cause this type of behavior?

EDIT 2:

Figured it out (solution below). The key factor was that I'm suing Django.

It should work... [**plnkr demo**](http://plnkr.co/edit/J9EW5dUvF8zuAeMAVWX8?p=preview). It must be something else isn't shown that is going on. — New Dev, Sep 16 '15 at 21:13
Thank you, @NewDev! I didn't even think to sanity check in a sandbox. Once I find the culprit, I'll update this question and/or answer it. — Jesse, Sep 16 '15 at 21:18
best practice is to always bind to a property of an object, or put another way [Always use dots](http://stackoverflow.com/q/17606936/4320665) — ryanyuyu, Sep 16 '15 at 21:23

score 2 · Accepted Answer · answered Sep 21 '15 at 15:05

If you're using another web framework (i.e. Django) that will be parsing your Angular templates, make sure you instruct the parser to leave the Angular expressions as is.

In Django you would just wrap the code in verbatim tags:

...
{% verbatim %}

  {{angularExpressions}}

{% endverbatim %}
...

Why would ng-bind work, where {{}} is not

1 Answers1