parse html inside ng-bind using angularJS [duplicate]

Question

I'm having issue with angularJs. My application requests some data from the server and one of the values from the data returned from the server is a string of html. I am binding it in my angular template like this

<div>{{{item.location_icons}}</div> 

but as you might expect what I see is not the icons images but the markup basically the stuff in the div looks like

 "<i class='my-icon-class'/>" 

which is not what I want.

anyone know what I can do to parse the html in the transclusion

Answer 1

You want to use ng-bind-html and ng-bind-html-unsafe for that kind of purpose.

The examples are shown here

Answer 2

As ng-bind-html-unsafe is deprecated, you can use this code instead.

You need to create function inside your controller:

$scope.toTrustedHTML = function( html ){     return $sce.trustAsHtml( html ); } 

and use something like this in your view:

<span ng-bind-html='toTrustedHTML( myHTMLstring )'></span> 

Don't forget to inject $sce:

AppObj.controller('MyController', function($scope, $sce) {     //your code here  });