Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


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

aalcock opened this Issue · 3 comments

3 participants


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 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 Do bring up your JS console to view the messages.

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


I have asked the community on StackExchange if there is a fix/workround:


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?


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.

@mhevery mhevery closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.