Telling angular to pickup a dynamically added directive

Question

I am creating a bootstrap popover and I'm trying to use a directive in the content of the popover.

I use the following HTML:

<div data-animation="false"
     data-template='<div style="width: 400px; max-width: 400px; height: 400px; max-height: 400px;" class="popover some-custom-classes" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
     data-html='true'
     data-placement='right'
     data-original-title='My title'
     data-content='<b>TEST</b> <my-directive></my-directive> TEST'
     data-trigger='manual'
     data-container=".modal-dialog">

     Some Content
</div>

Whenever a hover over the DIV happens, somewhere in code I do:

$element.popover("show");

This does launch a popover with the contents:

"TEST TEST"

However, the directive is not shown. It is not picked up by angular and thus the browser ignores it because it doesn't know the "my-directive" element. I think Angular doesn't pick it up because the directive is added to the DOM dynamically (independ from angular) using jquery by bootstrap's popover implementation.

The question: Is there a way to manually tell angular to "parse" the directive?

PS. I think in the newer versions of ui-bootstrap you can specify an angular template, but unfortunately I can't use ui-bootstrap (except the ancient version 0.10.0 which seems not to work for me with popovers).