angularjs string variable to html element using sanitize

Question

AngularJS code:

$scope.checking="<div style="color:red;">check</div>";

HTML code:

<p ng-bind-html="checking"></p>

so i used $sanitize for this one and the ng-bind-html directive to get the job done.

So the result in html page is:

check

and the above should come in red color

i got the output but the string 'check' does not come in red! the style tag is ignored! how can i do it? do i use interpolate?

Any way to do it? hopefully its simple... AngularJS experts please help!

Answer 1

$sanitize Sanitizes an html string by stripping all potentially dangerous tokens.

So do use $sce service method to make it trusted html using trustAsHtml method.

$scope.checking= $sce.trustAsHtml("<div style="color:red;">check</div>");