Toggle/Hide Bootstrap Navbar Collapse on View Change with AngularJS

Question

I am using the Bootstrap ui-module and AngularJS. My problem is on the mobile view, when a user changes views, the .navbar-collapse stays open and I want it to collapse when the view changes. I'm a noob to angular and I just found out about the bootstrap navbar directives, but here's what I am currently using:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" ng-click="navbarCollapsed = !navbarCollapsed">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <ul class="list-inline list-unstyled">
        <li class="hidden-xs hidden-sm">
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home">
            <div class="sprite sprite-logo">
              <span class="sr-only">Home Button</span>
            </div>
          </a>
        </li>
        <li>
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home" class="navbar-brand">
            <div id="headerName">
              <h1 id="small-line">
                More Than 80 Years of Service
              </h1>
              <h1 id="big-line">
                BCOAPO
              </h1>
            </div>
          </a>
        </li>
      </ul>
    </div><!-- end navbar-header -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-navbar-collapse" collapse="navbarCollapsed">
      <ul class="nav navbar-nav navbar-right">

        <li class="hidden-sm" ng-class="{ active:nav.isActive('home') }">
          <a ng-click="nav.setActive('home'); gotoTop()" href="#/home"><span class="glyphicon glyphicon-home"></span> &nbsp;Home <span class="sr-only">Home</span></a>
        </li>

        <li class="dropdown">
          <a href class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
            <i class="fa fa-leanpub"></i> &nbsp;About Us <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li ng-class="{ active:nav.isActive('about') }">
              <a ng-click="nav.setActive('about'); gotoTop()" href="#/about"><i class="fa fa-users"></i> &nbsp;Who We Are</a>
            </li>
            <li ng-class="{ active:nav.isActive('scholarships') }">
              <a ng-click="nav.setActive('scholarships'); gotoTop()" href="#/scholarships"><span class="glyphicon glyphicon-education"></span> &nbsp;Scholarships</a>
            </li>
          </ul>
        </li>

        <li ng-class="{ active:nav.isActive('branches') }">
          <a ng-click="nav.setActive('branches'); gotoTop()" href="#/branches"><i class="fa fa-building"></i> &nbsp;Branches</a>
        </li>
        <li ng-class="{ active:nav.isActive('contact') }">
          <a ng-click="nav.setActive('contact'); gotoTop()" href="#/contact"><span class="glyphicon glyphicon-phone-alt"></span> &nbsp;Contact Us</a>
        </li>

      </ul>
    </div><!-- end main-navbar-collapse -->

  </div><!-- end container -->
  <div id="main-navbar-bumper"></div>
</nav>

JS

angular.module('BCOAPO').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

  $scope.gotoTop = function() {
    $location.hash('top');

    $anchorScroll();
  };

  this.active;

  this.setActive = function(newActive) {
    this.active = newActive;
    return true;
  };

  this.isActive = function(currentActive) {
    if (this.active === currentActive) {
      return true;
    } else {
      return false;
    }
  };

  this.closeNav = function() {
    $('#main-navbar-collapse').hide();
    return true;
  };

  $scope.navbarCollapsed = true;

}]);

What I've Tried:

Using the directives ng-click="navbarCollapsed = !navbarCollapsed" and collapse="navbarCollapsed" as per Angular UI, Bootstrap Navbar Collapse and Javascript

Creating a jQuery event to hide the navbar-collapse as per the this.closeNav function in my controller. But this caused the navbar to become permanently hidden. Is there a way to simply mimic the click event on the navigation links and apply it to the toggle button instead but only on screens less than 992px?

this.closeNav = function() {
  $('.navbar-toggle').click();
};

Answer 1

this is how i went about it.. I reverted back to the default bootstrap navbar without the angular directives and altered this function

$scope.gotoTop = function() {
  $location.hash('top');
  if ($(window).width() <= 768) {
    $('.navbar-toggle').click();
  }
  $anchorScroll();
};

Answer 2

have you tried this?

    $scope.gotoTop = function() {
$location.hash('top');
$scope.navbarCollapsed = false;
$anchorScroll();

};

or watch the state change?

  $scope.stateChange = $state;
   $scope.$watch('statechange.current.name',function(){
   $scope.navbarCollapsed = false;
   }

hope it helps