Nothing happening when calling Bootstrap Modal from Angular Treeview directive - angularjs

Question

I'm using Angular Treeview to build a hierarchy in my website. I've added a Bootstrap Dropdown to each node in the hierarchy, it is displayed when the user clicks on the node label.
The menu items displayed in the dropdown is different depending on the type of the node. All this I've gotten to work.
Now when the user wants to add a node a bootstrap modal is supposed to open for user input. This is where I'm stuck, the modal does not get called at all. I've gotten functions within the directive working using $(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope));, but if I want to open a model defined in the directive template it does not work.
I've tried the solutions here and here, but they are not working.
Here is a simplified version of the directive template:
template =
'<div class="modal hide fade" id="addThisNode"">'+
'<div class="modal-body">'+
'<p>This Node Body</p>'+
'</div>'+
'</div>'+
'<div class="modal hide fade" id="addOtherNode"">'+
'<div class="modal-body">'+
'<p>Other Node Body</p>'+
'</div>'+
'</div>'+
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="normal" '+
'data-ng-hide="node.' + nodeChildren + '.length">'+
'</i> ' +
// Call this funcion when
// the node label is clicked
'<span class="treenode {{node.' + nodeType + '}}" '+
'id="{{node.' + nodeId + '}}"'+
'data-ng-class="node.selected" '+
'data-ng-click="' + treeId +
'.selectNodeLabel(node)">'+
'{{node.' + nodeLabel + '}}'+
'</span>' +
// bootstap dropdown menu
'<div class="dropdown" data-ng-show="node.selected">'+
'<a data-toggle="dropdown"><span class="caret"></span></a>'+
'<ul class="dropdown-menu">'+
// list items get appended here
'</ul>'+
'</div>'+
'</li>' +
'</ul>';
If the user clicks the node label this function is called:
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function( selectedNode ) {
// set currentNode
scope[treeId].currentNode = selectedNode;
// Get the node type
var nodetype = scope[treeId].currentNode.NodeType;
var appendThis = '';
if (nodetype == 'This'){
appendThis = '<li><a data-target="#addThisNode" href="" data-toggle="modal">Add This Node</a></li>';
}
else if (nodetype == 'Other'){
appendThis = '<li><a data-target="#addOtherNode" href="" data-toggle="modal">Add Other Node</a></li>';
}
$(".dropdown > ul.dropdown-menu").html($compile(appendThis)(scope));
};
Sorry if this is confusing, it's confusing to me as well. But if you have tips on calling modals from inside a directive anything will be appreciated.

Answer 1

After searching through a lot of posts I was able to find an answer. I'm posting it here in case it can help anyone else.
I changed the structure of the template a bit, but the functionality stays the same. The actual problem was in compiling the template. It worked when I compiled it like this:
$(".dropdown > ul.dropdown-menu").html(appendThis);
$compile($(".dropdown > ul.dropdown-menu").contents())(scope);