AngularJS with Bootstrap 3 navbar not collapsing on small device and hash tag links

Question

So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery

$('.nav li a').not('.dropdown-toggle').on('click', function(){
    $('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});

but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example
twitter-boostrap-navbar-with-angular-js-collapse-not-functioning
but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)

Oh and if that help, my navbar Bootstrap 3 menu looks like this

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#/new">Add</a></li>
                    <li><a href="#/undo">Undo</a></li>
                    <li><a href="#/list">List</a></li>
                </ul>
            </li> 
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container -->
</nav>

Answer 1

As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/

HTML

  <div class="container-fluid">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
        <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="#">Project Name</a>
    </div>
    <div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
              <li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">          
              <li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li id="fat-menu" class="dropdown">
          <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
              <li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

JS

var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);

function NavBarCtrl($scope, $location) {

$scope.isCollapsed = true;

$scope.menu1 = [
    {text: 'first', link : '/first'},
    {text: 'second', link : '/second'},    
    {text: 'third', link : '/third'},
    {text: 'fourth', link : '/fourth'},    
    {text: 'fifth', link : '/fifth'}
];

$scope.go = function(path) {
    $scope.isCollapsed = true;
    $location.path('#/' + path);
}     
}