Angular JS shows HTML within the tag

Question

I am trying to insert HTML inside template using ng-bind-html-unsafe attribute. But for some reason its not working.

My code:

<tr class="white two-button" ng-repeat="(key,value) in recommendations | ojoScoreFilter:ojoScore | relevancyScoreFilter:relevancyScore | orderBy:predicate:reverse"> <td> <div ng-bind-html-unsafe="value.button"></div> </td> </tr> 

I am not able to see the HTML. If I change ng-bind-html-unsafe="value.button" to ng-bind-html-unsafe="{{value.button}}" then it shows HTML but within the attribute, something like this:

<div ng-bind-html-unsafe="&lt;a class=&quot;action_hrefs full-width bgcolor10 purple-hover flat-button flat-white-button btn&quot; data-value=&quot;947&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;&nbsp;Unlock&lt;/a&gt;"></div> 

Answer 1

Ok I found solution for this:

JS:

$scope.renderHtml = function(html_code) {     return $sce.trustAsHtml(html_code); }; 

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>