how to do ng-bind-html from a directive?

Question

<!-- ng-bind-html de uma diretiva customizado não funciona -->
<span ng-bind-html="customDirective"></span>


<!-- é renderizado -->
<choices-tab></choices-tab>

//Assim funciona:
$scope.customDirective = '<div class="alert alert-danger">teste</div>';

//Se eu fazer o ng-bind-html de uma diretive não funciona; não é renderizado nada
$scope.customDirective = '<choices-tab></choices-tab>';


angular.module('app')
.directive('choicesTab', function(){
    return {
        templateUrl: '../choices.html',
        link: function(){

        }
    }
});

ps. The Directive works normally without the ng-bind-html

Answer 1

I cannot comment, therefore, this text does not intend to be the answer.

What I have to say is that you have to use $Compile in the directive:

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

app.directive('choicesTab', ['$compile', function($compile){
    return {
        templateUrl: '../choices.html',
        link: function(){

        }
    }
}]);

Then you can play Inception.

More references:

Using $Compile in Angular

Angular ng-bind-html and Directive Within it