How to render text into HTML in AngularJS

Question

I have a variable in a scope with some HTML content. I want to render it as HTML on the webpage, but in my case it displays as full text. Can anyone help me?

This is my code:-

//contoller.js

$scope.message = '<b><i>result has been saved successfully.</i></b>';

//demo.html

<p ng-bind="message"></p>

Answer 1

You need to inject $sce service into your controller or Directive etc. and use $sce service like this:-

$scope.Message = $sce.trustAsHtml("<b><i>result has been saved successfully.</i></b>");

And bind this in your HTML page e.g;

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

Answer 2

You have to secure your content with the $sce service and then use the

ng-bind-html directive

docs here.

---

EDIT

you can find the usage of sce.trustAsHtml here.

Answer 3

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