Home » Html » How to output html through AngularJS template?

How to output html through AngularJS template?

Posted by: admin November 30, 2017 Leave a comment

<h1>{{ revision.title }}</h1>

<div ng-bind-html="revision.content"></div>

The title outputs fine, but the content – doesn’t. It’s got some html in it and I get the following error: Attempting to use an unsafe value in a safe context. which is being described as so: http://docs.angularjs.org/error/$sce:unsafe and that’s fine, but then how can I output the content as there will be some html in it and so I must set it to {{ revision.content | safe }} or smthn. What is the correct way?


AngularJS version: 1.2


So the fix is this:

include angular-sanitize.min.js from http://code.angularjs.org/ and include it in your module:

var app = angular.module('app', ['ngSanitize']);

and then you’re free to use ng-bind-html


I created an ng-html directive that does the same basic thing that ng-bind-html-unsafe used to do. However, I strongly suggest that you only use it with caution. It could easily open your site up to malicious attacks. So know what you’re doing before you implement it:

.directive('ngHtml', ['$compile', function($compile) {
    return function(scope, elem, attrs) {
        scope.$watch(attrs.ngHtml, function(newValue, oldValue) {
            if (newValue && newValue !== oldValue) {

And then you would use it as:

<div ng-html="revision.content"></div>

Hope that helps.


I know it’s an older question, but you can also trust the value using $sce in your controller:

$scope.revision.content = $sce.trustAsHtml($scope.revision.content);

After that, ng-bind-html will work.


What version are you using?
If you are using less than 1.2 you can try ngBindHtmlUnsafe


according to Official AngularJs Doc about ngBindHtml you must inject ngSanitize into your app dependencies

Evaluates the expression and inserts the resulting HTML into the
element in a secure way. By default, the resulting HTML content will
be sanitized using the $sanitize service. To utilize this
functionality, ensure that $sanitize is available, for example, by
including ngSanitize in your module’s dependencies (not in core
Angular). In order to use ngSanitize in your module’s dependencies,
you need to include “angular-sanitize.js” in your application.

Then you can install ngSanitize module by there ways:

1 – using bower

bower install --save angular-sanitize

2 – using npm

npm install --save angular-sanitize

3 – manually by download angular-sanitize.js file from code.angularjs.org path which include all angularJs files categories by version number like @Xeen answer

See More about install ngSanitize module from Oficial angularJs github repository for install angular-sanitize