Angular directive through innerHTML in typeahead.js

Question

I'm trying to use a custom template with typeahead.js by passing in an angular directive to the templates option.

$('.typeahead#players').typeahead({
      hint: true,
      highlight: true,
      minLength: 0
    }, {
      source: substringMatcher(typeaheadPlayers, 'player'),
      templates: {
        suggestion: function(data){
          return ['<div><avatar user-id="' + data.user_id + '" user-full-name="' + data.long_display_name + '" changed-src=' + true + '></avatar>',
                  '<p>' + data.long_display_name + '</p>',
                  '</div>'].join('\n');
        },
        empty: '<div><p>No users were found by that name.</p></div>'
      }
    });

The HTML gets injected properly and the long_display_name is displayed just fine. The directive that I've defined called avatar isn't firing at all. I've tried to $compile and I've tried passing in ng-transclude, but my directive still won't fire.

How can I pass in an angular directive into this template and trigger it to fire?