I'm using AngularJS, JQuery and Bootstrap. I want to use Bootstrap's tooltip inside my app. When I use this code inside ui-view tooltip don't work.
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
If this code used directly in index.html file tooltip works.
...my code
<ui-view></ui-view>
I think it's because of jQuery's behavior: all templates loaded dynamically, so after $(document).ready jQuery don't watch for changes, all actions is done only to static elements. But we can use element's on function (which is similar to live).
So with AngularJS we can't use Bootstrap's JS. There is a way to achieve this - use directives. But my app has a lot more function and scripts (like animations etc.). It's impossible to write directives to all functions I need to use.
I looked for any way to refresh jQuery (trigger $(document).ready function), but without any result. I tried to load jQuery manually in Angular Controller, but this also didn't work.
I found way and use grunt-html2js to compile HTML files into one JS file. Now pages doesn't load dynamically. Mainly everything works fine. But when I open another page (for example: I first opened /login page, and then trying to open /dashboard) it's seems jQuery and Bootstrap brokes again (because template loaded to DOM from JS file dynamically).
Is there any way to say jQuery something like Page's DOM is updated, please refresh all your functions.? As I previously said I don't want to use directives. Or maybe there is a way to dynamically refresh all scripts in page?
