title: navbar-nav li link should remain active when nav-tabs is switching between tabs (it doesn't)
body: <p>On my index page: (main tabs)</p>
  
  <pre><code>  &lt;div id="navbar" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav" bs-active-link&gt;
              &lt;li&gt;&lt;a href="#/"&gt;1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/activiteiten"&gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/profiel"&gt;Profiel&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>On my tabs page: (sub tabs) - (ex.: profiel/georganiseerde)</p>
  
  <pre><code> &lt;ul class="nav nav-tabs"&gt;
      &lt;li role="presentation" class="active"&gt;
          &lt;a href="#/activiteiten"&gt;
              &lt;p3&gt;Georganiseerde&lt;/p3&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li role="presentation"&gt;
          &lt;a href="#/deelnemende"&gt;
              &lt;p3&gt;Deelnemende&lt;/p3&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>1) When I go to "profiel main tab" "georganiseerde tab" is active.
  BUT
  2) When I go to "Deelnemende tab" profiel GOES back INACTIVE while it should remain active.</p>
  
  <p>I already use this code to have my main tabs active. (Found it on stack overflow - Tx!)</p>
  
  <pre><code> angular.module('WebApp')
          .directive('bsActiveLink', ['$location', function ($location) {
              return {
                  restrict: 'A', //use as attribute
                  replace: false,
                  link: function (scope, elem) {
                      //after the route has changed
                      scope.$on("$routeChangeSuccess", function () {
                          var hrefs = ['/#' + $location.path(),
                                       '#' + $location.path(), //html5: false
                                       $location.path()]; //html5: true
                          angular.forEach(elem.find('a'), function (a) {
                              a = angular.element(a);
                              if (-1 !== hrefs.indexOf(a.attr('href'))) {
                                  a.parent().addClass('active');
                              } else {
                                  a.parent().removeClass('active');
                              };
                          });
                      });
                  }
              }
          }]);
  </code></pre>
  
  <hr>
  
  <p><em>Tools:</em>
  I used this tutorial.(<a href="https://www.airpair.com/angularjs/building-angularjs-app-tutorial" rel="nofollow">https://www.airpair.com/angularjs/building-angularjs-app-tutorial</a>) Very good except the menu collapse did not work.
  But I solved that issue already.
  I also solved the issue with the main active links tx to Stackoverflow.</p>
  
  <p>Many Tx for your help! B.</p>