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

i'm using angular treeview build hierarchy in website. i've added bootstrap dropdown each node in hierarchy, displayed when user clicks on node label. menu items displayed in dropdown different depending on type of node. i've gotten work.

now when user wants add node bootstrap modal supposed open user input. i'm stuck, modal not called @ all. i've gotten functions within directive working using $(".dropdown > ul.dropdown-menu").html($compile(appendthis)(scope));, if want open model defined in directive template not work.

i've tried solutions here , here, not working.

here simplified version of 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 funcion when         // node label 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 appended here               '</ul>'+         '</div>'+     '</li>' + '</ul>'; 

if user clicks node label function called:

scope[treeid].selectnodelabel = scope[treeid].selectnodelabel || function( selectednode ) {     // set currentnode     scope[treeid].currentnode = selectednode;     // node type     var nodetype = scope[treeid].currentnode.nodetype;     var appendthis = '';    if (nodetype == 'this'){        appendthis = '<li><a data-target="#addthisnode" href="" data-toggle="modal">add 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 confusing, it's confusing me well. if have tips on calling modals inside directive appreciated.

after searching through lot of posts able find answer. i'm posting here in case can else.

i changed structure of template bit, functionality stays same. actual problem in compiling template. worked when compiled this:

$(".dropdown > ul.dropdown-menu").html(appendthis); $compile($(".dropdown > ul.dropdown-menu").contents())(scope);