Angular bind html from Html entities

How to encode a HTML entities and display the HTML ? I have attached sample fiddle along this ticket

Controller:-

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
    $scope.bar = "<p><b>Lorem Ipsum</b> <br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.</p><p><b>Rooms</b> <br /&gt";
});

angular.bootstrap(document, ['myapp']);

HTML :-

<div ng-controller="foo">

    <div ng-bind-html="bar"></div>

</div>

Output :-

<p><b>Lorem Ipsum</b> <br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.</p><p><b>Rooms</b> <br /> 

Expected output :-

Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.

Rooms

Sample Js fiddle :- http://jsfiddle.net/68n89rj3/

It isn't working because your HTML is already encoded, so it just outputs the encoded html characters. What you need is to first decode the HTML before assigning it to the $scope.bar variable.

One way to do it is this:

$scope.bar = angular.element('<div>').html("&lt;p&gt;&lt;b&gt;Lorem Ipsum&lt;/b&gt; &lt;br /&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.&lt;/p&gt;&lt;p&gt;&lt;b&gt;Rooms&lt;/b&gt; &lt;br /&gt").text();

It's a bit of a hack, where you first create an unparented div-element (so it only exists in memory), add your string as the html of this element, and finally extract the text. That should work for you.

---

Adding a filter to do it:

angular.module('app').filter('htmldecode', function(){
    return function(encodedHtml) {
        return angular.element('<div>').html(encodedHtml).text();
    };
});

and use it like this:

<div ng-bind-html="bar | htmldecode"></div>