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>

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>

• javascript
• angularjs

• 2 Why do you need html string in controller and not template this? – charlietfl Commented Mar 3, 2016 at 13:07
• because i wanted to display a successfull message while user click on Save Button and i want that message look good. – Surjeet Bhadauriya Commented Mar 3, 2016 at 13:14
• So make it look good in the template and pass in text...that is the normal approach. – charlietfl Commented Mar 3, 2016 at 13:17
• don't i use in controller. If i want? – Surjeet Bhadauriya Commented Mar 3, 2016 at 13:19
• Makes no sense doing it in controller. no separation of concerns and requires more complicated process to inject it. That's what templates are for – charlietfl Commented Mar 3, 2016 at 13:20

3 Answers 3

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>

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.

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