Not able to render escaped html properly in angularjs

Question

I have data like below

  var $scope.testtext  ="<b>Conducting</b>";
  $scope.getSafeHtml = function(x)
  {

     return $sce.trustAsHtml(x);
  };
  <div ng-bind-html="getSafeHtml(testtext)" ></div>

I want output to come like

Conducting

But what ever i do i always get output like below

<b>Conducting</b>

Below is what i have tried.

  <div ng-bind-html="getSafeHtml(testtext)" ></div>
  <div ng-bind-html="testtext" ></div>

I included ngSanitize in my app. Even that did not work. So i wanted to know if i am doing anything wrong i am doing?

Only thing that worked for me is

  var $scope.testtext  ="<b>Conducting</b>";
  $scope.getSafeHtml = function(x)
  {
     var decoded = angular.element('<p>').html(x).text();
     return $sce.trustAsHtml(decoded);
  };

But i don't want to use the last solution, as i know something small is wrong with the first code.

Here is the plunker for same.

plnkr.co/edit/OG13qEb14PTXZj3rqiDM?p=preview

Answer 1

What about create a directive to do that?

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

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

This thread may help Compiling dynamic HTML strings from database