AngularJS and Bootstrap not working with dropdown

Question

So, my question deals with why my drop down is not working for my navigation bar. It works when all the HTML is in one document but not when I'm using ng-include. I'm not using Bootstrap but MetroUI-CSS.

index.html

<div id="container">
    <div id="header" ng-include="'app/templates/header.html'"></div><!-- End header container -->
</div>

partial/header.html

<div id="site_nav_bar">
    <nav class="navigation-bar dark fixed-top shadow">
        <nav class="navigation-bar-content">
            <item class="element"><i class="icon-keyboard" style="padding-right: 1em"></i> <a href="index.html">Home</a></item>
            <item class="element-divider"></item>
            <item class="element"><a href="#/about.html">About</a></item>
            <item class="element"><a href="#/contact.html">Contact</a></item>

            <ul class="element-menu">
                <li>
                    <a class="dropdown-toggle" href="#">Blogs</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li>
                            <a href="#" class="dropdown-toggle">Programming Blogs</a>
...
                        </li>

So basically, when I click on Blogs it does not drop down the menu.

Answer 1

Bootstrap evaluates the DOM only when it's ready (ready event), therefore if your dropdown exists at this point, it would work, otherwise if it will be added to the DOM later on (using ng-include for instance) it won't.

Behind the scenes ng-include manipulates the DOM for you and performs an AJAX request to retrieve the HTML you want to include. bootstrap is not aware of that and won't wait for the DOM to be updated.

to avoid that use bootstrap-ui