Angular with bootstrap: How to toggle up the nav bar in responsive mood?

Question

I am using angularJS and bootstrap in a single project.

When the web page is in the responsive mood , bootstrap navbar menu changes to toggler the menu responsive nav bar.

The issue is when I use angular routing and menu toggle down. After clicking in one of the links of menu, it doesn't toggle up because of not refreshing the page.

Any idea?

Nav bar code :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle"
        data-toggle="collapse" 
        data-target=".navbar-collapse"
      >
        <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="#">Name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav" ng-controller="navCtrl">
        <li><a href="#">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-left">
        <li class="active" data-toggle="modal" data-target="#myModal"><a>Modal</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>