Injecting angular directive through mapquest library. Directive not detected - angularjs

Question

I have a directive, <flightpoint></flightpoint>.
I need to add this directive to Mapquest's map via map.addShape().
However, angular is not aware of the new directive on the map, therefore it doesn't process it (its blank html).
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
});
A few things I've tried.....
1. $compile
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml($compile("<flightpoint></flightpoint>")($scope), -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
$scope.$apply();
});
Result: [object Object] is displayed on the map instead of my directive.
2. angular.bootstrap()
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<flightpoint></flightpoint>", -6, -20, 'mqa_nostyle_htmlpoi');
var x = routeMap.addShape(poi);
angular.bootstrap(document, ['app']);
});
Result: "Error: App Already Bootstrapped with this Element 'document'"
If I was able to compile it after its been added that would be okay too.

Answer 1

This is a little sloppy but its working for me.
I'm able to add a dummy tag and insert compiled angular into it.
MQA.withModule('htmlpoi', function() {
var poi=new MQA.HtmlPoi( {lat:39.743943, lng:-105.020089} );
poi.setHtml("<span id=\"insertDirectiveHere\"></span>", -6, -20, 'mqa_nostyle_htmlpoi');
routeMap.addShape(poi);
// now that you've added the span we can insert compiled angular on that tag
var domElem = document.getElementById('insertDirectiveHere');
domElem.innerHTML = "<flightpoint></flightpoint>";
$compile(domElem)($scope);
});