Bootstrap + Angular dynamic menu not collapsing after uncollapse

Issue

I have the following code, I am trying to show a collapsible menu which items I call with AngularJS:

<div class="btn-group" role="group">
    <button type="button" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#SearchMenu" aria-expanded="false">
        <i class="glyphicon glyphicon-th-list"></i>
        <i class="glyphicon glyphicon-chevron-down"></i>
        Search Menu
    </button>
</div>

<div class="collapse navbar-collapse" id="SearchMenu">
    <div class="row">
        <div class="col-md-10">
            <ul class="nav navbar-nav">
                <li class="dropdown" ng-repeat="menuDetail in menu.data" >
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{menuDetail.item.displayName}}<span ng-if="menuDetail.submenu" class="caret"></span></a>
                    <ul class="dropdown-menu" ng-if="menuDetail.submenu">
                        <li ng-repeat="submenu in menuDetail.submenu"><a href="">{{submenu.displayName}}</a></li>
                    </ul>
                </li>
                <li>
                    <a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Configurations">
                        <span class="glyphicon glyphicon-cog"></span><span class="hidden-md hidden-sm"> Config</span>
                    </a>
                </li>
                <li>
                     <a href="" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Help">
                        <span class="glyphicon glyphicon-question-sign"></span><span class="hidden-md hidden-sm"> Help</span>
                     </a>
                </li>
                <li>
                     <a href="#/" class="icon-menu-padding" data-toggle="tooltip" data-placement="bottom" title="Logout">
                        <span class="glyphicon glyphicon-log-out"></span><span class="hidden-md hidden-sm"> Logout</span>
                     </a>
                </li>
            </ul>
        </div>
    </div>
</div>

When running without being able to connect to the server to retrieve the menu items, it works fine (show and hide properly even without most of the options). But when running it in the server and debugging with F12 in chrome and in IE, after showing the menu, is not able to collapse again.

When I click in the button to hide again the menu, the Chrome Developer Tools indicate that it changes (see first image), but after an instant, it comes back to the original (see second image), so I am not able to hide the menu again.

The moment when a click is made to the button to hide the menu

After an instant goes back automatically

Any idea or suggestion?

Thanks!

Solution

Solved. Turns out that I have an entire HTML (with html and body tags) inserting into a view. I should have my html inserting only from the div section. Strange that in Chrome worked just fine, but iE couldn't handle it.

thanks

Answered By - Edward