html entities decode angular

Question

I am trying to decode html entities in Angular, and seen some solutions for some strings with Sanitize, but I have a lot of JSON documents in my db with that I need sanitized. How can I do this? Right now my html shows the full

<h2>Badkamer</h2>

inclusive the tags.

This is a part of my json document

{  
"badkamer" : {
    "content" : "<h2>Badkamer</h2>"
                   <p>text</p>
   }
}

This is my angular controller

app.controller('DataCtrl', ['$sce', function($scope,$http,$sce){
   $scope.specials = function(){
   $scope.special = [];

 $http.get('/specialdata').then(function(d){
   $scope.special = d.data[0];
   console.log(d.data);
  },function(err){
   console.log(err);
  });
 };
}]);

This is the page where I show my data from MongoDB

<div class="align-content-inner">
   <div>
      {{special.badkamer.content}}
   </div>
</div>

Answer 1

You need to include angular-sanitize.js script in HTML, and ngSanitize module on your app., Like :

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

and use ng-bind-html directive.., like:

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

See this demo plunker.