How can I display HTML in a <div> with Angular 1.2.0 - rc2

Question

I am trying to display some HTML in my web page and using the following:

        xx {{ pageHtml }} yy 

        <div data-ng-bind-html-unsafe="$scope.pageHtml"></div>

The data between xx and yy shows up as raw HTML but what I want is to not show it as raw. I used the code on the second line but nothing shows.

Is there something I am missing? Did something change in 1.2 because I thought this was working before?

Update - I do 100% trust the HTML and don't want to clean it. There will be code inside the HTML that needs to show on the screen.

Answer 1

By default the innerHTML-ed expression result is sanitized using the $sanitize service which would require you to include ngSanitize in your module's dependencies.

<div data-ng-bind-html="pageHtml"></div>

However if you trust the HTML to be safe, you can bypass sanitization using $sce service that you would inject in your controller:

$scope.someSafeContent = $sce.trustAsHtml("<i>Hello</i> <b>World!</b>");

HTML:

<!-- bypasses sanitizaton -->
<div data-ng-bind-html="someSafeContent"></div>

Answer 2

Controller

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

In View

This will resolve your problem.