Angular UI Bootstrap - Responsive Navbar - Hide on state/view change

Question

I'm using Angular UI Bootstrap#0.12.1 and UI router#0.2.15 in my application.

I have a responsive navbar which is working fine. The problem is in mobile view When I click on any menu/link, the state/view changes. But the navbar appears to stay there.

I want it to hide. It will be great if it come as drop-down.

I created a Plunkr Sample

Following is my navbar

<nav class="navbar navbar-default" role="navigation" ng-controller="MenuCtrl">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <button id="btn-menu-toggle" type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">

      <ul class="nav navbar-nav">
        <li ng-class="{'active':$state.includes('home')}" ng-click="collapseMenu()"><a ui-sref="home.main1">Home</a></li>
        <li ui-sref-active="active" ng-click="collapseMenu()"><a ui-sref="dashboard.dash1">Dashboard</a></li>
        <li ui-sref-active="active" ng-click="collapseMenu()"><a ui-sref="report">Reports</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </nav>

I tried calling collapseMenu() function on any menu click and I have the following code in controller

$scope.collapseMenu = function() {
        if ($(window).width() <= 768) {
            console.log('hiding');
            $('#btn-menu-toggle').click();
        }
    }

But I'm getting error

Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.4.2/$rootScope/inprog?p0=%24apply
    at REGEX_STRING_REGEXP (angular.js:68)
    at beginPhase (angular.js:16202)
    at Scope.parent.$get.Scope.$apply (angular.js:15946)
    at HTMLButtonElement.<anonymous> (angular.js:23305)
    at HTMLButtonElement.eventHandler (angular.js:3273)
    at Object.n.event.trigger (jquery-2.1.4.min.js:3)
    at HTMLButtonElement.<anonymous> (jquery-2.1.4.min.js:3)
    at Function.n.extend.each (jquery-2.1.4.min.js:2)
    at n.fn.n.each (jquery-2.1.4.min.js:2)
    at n.fn.extend.trigger (jquery-2.1.4.min.js:3)

How to solve it? Is there any better way to make the navbar as dropdown in mobile view?

Thanks.

Answer 1

You don't need to call .click() explicitly. Just change the variable that is controlling the state of the menu:

$scope.collapseMenu = function() {
    if ($(window).width() <= 768) {
        console.log('hiding');
        $scope.navCollapsed = true;
    }
} 

Working fork on plunkr