angularjs - angular directives inside ng-bind-html is not evluated -

this subsequent question this post .

i have ng-attr-title used in html injected using ng-bind-html not working ie) title not formed in dom element hence on hovering tooltip not formed.here code

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

problem illustrated in jsfiddle

you have use $compile service achieve this.

js:

var myapp = angular.module('myapp', ['ngsanitize']);   myapp.controller("myctrl", function($scope){     $scope.tl="this 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 compile html template against $scope.