Why AngularJS prints double quotation in HTML

Question

With AngularJs, I am trying to display currency exchange with image. Here is my Razor code below.

<span ng-controller="CurrencyController">
     <span ng-bind="currencies"></span>
</span>

and I am sending the below text from controller

string text = "Dollar : 1.7 <img src=\"~/Images/Currency/up.png\">";

when the HTML is rendered, I took a look at the source in Chrome, and I saw the HTML below...

<span class="ng-binding">
     "Dollar: 1.7 <img src="~/Images/Currency/down.png">"
</span>

Why is the rendered text in HTML is surrounded with double quotation? how can I fix this?

Answer 1

You should be using ng-bind-html, as stated in the docs, is the directive used to render html. ng-bind should only be used if you cant to render a simple html text node.

So, your code should look like this:

<span ng-controller="CurrencyController">
   <span ng-bind-html="currencies"></span>
</span>