ng-bind-html on a string containing angular directive

Question

I'm using angular ng-bind-html to add a control to the current element. When I do this ,control gets added but any angular directive specified in the string is missing . For example

Original string : '<a ng-click="hello()" style="color:#8FA2AF">Hello</a>'; Resulting control : <a style="color:#8FA2AF">Hello</a>

Can anyone help?

html

<span >
      <p ng-bind-html="sample_text"> 
</span>

Controller

mymodule.controller('MyController',function MyController($scope) {
$scope.sample_text='<a ng-click="hello()" style="color:#8FA2AF">Hello</a>';
}

Answer 1

you shoud use $sce.trustAsHtml() like this...

$scope.sample_text= $sce.trustAsHtml('`enter code here`<a ng-click="hello()" style="color:#8FA2AF">Hello</a>');

but this way you cannot bind scope variables (like your hello() function) to your html so best way is writing a directive...

here is working PLUNKER for both $sce and directive example...