Directives may not be linked by angular.bootstrap in dynamically loaded HTML

[aalcock]

I have an application based on AngularJS 1.0.1 and Bootstrap 2.0.2.

The application dynamically loads views; I use angular.bootstrap() to compile and link these fragments, and AngularJS is appears to be working fine, linking to my model and responding to events.

I want to put a Bootstrap tooltip on some dynamic elements, and have created a directive for this (using the approach laid out by AlexFigueiredoo at http://jsfiddle.net/AlexFigueiredoo/cRr9K/4/). This approach works well when the AngularJS view is on static HTML as you can see from the jsFiddle.

However, when the same code is used in an environment where the HTML is dynamically loaded, the popup is not working. Investigating, the 'tooltip' directive is now not being linked.

I have a test-case on jsFiddle at http://jsfiddle.net/aalcock/hFGb7/10/. Do bring up your JS console to view the messages.

Note that console.log never shows the directive factory being called, let alone linked.

[aalcock]

I have asked the community on StackExchange if there is a fix/workround: http://stackoverflow.com/q/12259963/1395668

[jamie-pate]

i added the tooltip attribute to the end of the tag and it worked for me. looks like you forgot the directive on the live example?

http://jsfiddle.net/CcRrN/

[mhevery]

Unfortunately that is not how the code is intended to work.

1. you can't use angular.bootstrap to load child pages, since that creates a whole new application which is not linked to the parent. You should be using ng-view or ng-include.
2. you can not use bootstrap code with angular out of the box. you need to wrap it in a directive.

We can't make what you want work, since the browser does not give us enough hooks to know when the DOM was changes by someone other then angular.