Directive inside bs-tooltip is not evaluated

Question

I am trying to have a <ul> element with its own directive (checkStrength) inside of an AngularStrap bs-tooltip title property, like this:

$scope.tooltip = {  
  title: '<ul id="strength" check-strength="pw"></ul>',   
  checked: false  
};

The behavior I want is as follows: when a user clicks on the input textbox, a tooltip will appear showing the strength of the password as they enter it in the textbox.

This does not work, as shown in the two Plunkers below:

Custom "checkStrength" directive outside bs-tooltip works fine: Plunker

Custom "checkStrength" directive inside bs-tooltip does not work: Plunker

Answer 1

Ok, it doesn't appear that this is supported out of the box. You are going to have to create your own binding directive

Directive

.directive('customBindHtml', function($compile) {  
  return {

    link: function(scope, element, attr) {
          scope.$watch(attr.customBindHtml, function (value) {
              element.html(value);
              $compile(element.contents())(scope);
          });
    }
  };

});

This go into Angular Straps code and make the follow modification on line 10 of tooltip.js in the plunker

Template

<div class="tooltip-inner" custom-bind-html="title"></div>

Then set the html property in the config to false.

Config

.config(function($tooltipProvider) {
  angular.extend($tooltipProvider.defaults, {
    html: false
  });
})

Example: Plunker