angular directives inside ng-bind-html is not evluated

Question

This is a subsequent question to this post .

I have an ng-attr-title used in the html injected using ng-bind-html which is not working ie) the title is not formed in the DOM element hence on hovering the tooltip is not formed.here is my code

myApp.controller("MyCtrl",function($scope) {
$scope.tl="this is title";
$scope.level = "<span ng-attr-title='{{tl}}'><b>data</b></span>";
});

Problem is illustrated in the Jsfiddle

Answer 1

You have to use $compile service to achieve this.

JS:

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

myApp.controller("MyCtrl", function($scope){
    $scope.tl="this is title";
    $scope.level = "<span ng-attr-title='{{tl}}'><b>data</b></span>"; 
});

myApp.directive('compileHtml', compileHtml);

function compileHtml($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.compileHtml);
            }, function (value) {
                element.html(value);
                $compile(element.contents())(scope);
            });
        }
    };
}

HTML:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
  <span compile-html="level" ></span>
</div>

This compileHtml directive will compile your HTML template against your $scope.