Navbar collapsed is closing while clicking on dropdown-toggle - html

Question

When the navbar is collapsed, I can't click on the elements on the dropdowns because when I click on a dropdown, it's closing the navbar. How can I avoid this behavior ?
<nav ng-app="app" ng-controller="AppCtrl" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
<ul class="nav navbar-nav pull-right">
<li id="home-tab" ng-class="{active : isActive('home-tab')}" ng-click="activateTab('home-tab')" class="tab"><span class="glyphicon glyphicon-home"></span>Home</li>
<li id="stats-tab" ng-class="{active : isActive('stats-tab')}" ng-click="activateTab('stats-tab')" class="tab"><span class="glyphicon glyphicon-stats"></span>Stats</li>
<li id="administration-tab" ng-class="{active : isActive('administration-tab')}" ng-click="activateTab('administration-tab')" class="tab dropdown"><a class="dropdown-toggle"><span class="glyphicon glyphicon-book"></span>Administration<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Content</li>
<li>Terminal</li>
<li>Users</li>
</ul>
</li>
<li id="profile-tab" ng-class="{active : isActive('profile-tab')}" ng-click="activateTab('profile-tab')" class="tab dropdown"><a data-toggle="dropdown" class="dropdown-toggle"><span class="glyphicon glyphicon-user"></span>Profile<span class="caret"></a>
<ul class="dropdown-menu">
<li>Me</li>
<li>Company</li>
</ul>
</li>
<li id="logout-tab" class="tab"><a><span class="glyphicon glyphicon-off"></span>Logout</a></li>
</ul>
</div>
</div>
</nav>
JSFiddle
Note: In the JSFiddle example, when you click on a dropdown, it is not expending. I don't know why, anyway it is working in my code. Forget that and look at the issue that makes my collapsed navbar closing while clickng on a dropdown. ;)

Answer 1

It's because you have
ng-click="navCollapsed=true"
on the main navbar div
<div class="collapse navbar-collapse" collapse="navCollapsed" ng-click="navCollapsed=true">
which means that the navbar closes anywhere you click on it, not just on the tabs.
Here is a version that doesn't collapse the navbar when you click on 'Administration' - Fiddle
<div class="collapse navbar-collapse" collapse="navCollapsed">
New activateTab:
$scope.activateTab = function(tabId) {
if (tabId != 'administration-tab') {
$scope.navCollapsed = true;
}
$scope.activeTab = tabId;
};