Trying Activate BootStrap Tabs outside of the tab-content on an AngularJS Route SPA

<!DOCTYPE html>
<html ng-app="appname">

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link data-require="bootstrap-theme@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
    <script data-require="angular.js@2.0.0-alpha.31" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular-route@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
    <script data-require="respond.js@1.1.0" data-semver="1.1.0" src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
    <script data-require="html5shiv@3.6.2" data-semver="3.6.2" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="indexController.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <br />
    <hr />
    <br />

    <div class="col-md-6">
      <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" data-target="#Description">Description</a></li>
          <li><a data-toggle="tab" data-target="#qualifications">Minimum Qualifications</a></li>
          <li><a data-toggle="tab" data-target="#tuition">Tuition Costs</a></li>
          <li><a data-toggle="tab" data-target="#faq">FAQs</a></li>
      </ul>
    
      <div class="tab-content">
          <div class="tab-pane fade in active" id="Description">
            <h2>Lorem</h2>
          </div>
          <div class="tab-pane fade" id="qualifications">
            <h2>Ipsum</h2>
          </div>
          <div class="tab-pane fade" id="Description">
              <h2>Dolor</h2>
          </div>
          <div class="tab-pane fade" id="tuition">
            <h2>Sit Amet</h2>
          </div>
          <div class="tab-pane fade" id="faq">
            <h2>Bananas</h2>
          </div>
      </div>
    </div>
    
    <br />
    <hr />
    <br />
    
    <!-- doesn't set the tab-pane to active! halp! -->
    ---
    <a data-toggle="tab" data-target="#Description">Description</a> ---
    <a data-toggle="tab" data-target="#qualifications">Qualifications</a> ---
    <a data-toggle="tab" data-target="#tuition">Tuition</a> ---
    <a data-toggle="tab" data-target="#faq">FAQ</a> ---
    <br />
    
    <!-- try it with href and jquery. doesnt work -->
    ::: <a data-toggle="tab" href="#Description">Description</a> ::: 
    <script>
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          var target = this.href.split('#');
          $('.nav a').filter('a[href="#'+target[1]+'"]').tab('show');
      })
    </script>

  </body>

</html>

// this the core angular module
// yes it's called "appname"

var appname = angular.module('appname', ['ngRoute', 'ngAnimate']);

// routing
appname.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/', {
            templateUrl: 'indexView.htm',
            controller: 'indexController'
        }).
        when('/about', {
            templateUrl: 'about.htm', 
        }).
        when('/contact', {
            templateUrl: 'contact.htm', 
        }).
        otherwise({
            redirectTo: '/'
        });
  }]);

/* Styles go here */

/* FADE transition */
.view-container {
    position: relative;
}

.view-frame.ng-enter, .view-frame.ng-leave {
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.view-frame.ng-enter {
    -webkit-animation: 0.5s fade-in;
    -moz-animation: 0.5s fade-in;
    -o-animation: 0.5s fade-in;
    animation: 0.5s fade-in;
    z-index: 100;
}

.view-frame.ng-leave {
    -webkit-animation: 0.5s fade-out;
    -moz-animation: 0.5s fade-out;
    -o-animation: 0.5s fade-out;
    animation: 0.5s fade-out;
    z-index: 99;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

<div class="col-md-6">
  <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" data-target="#Description">Description</a></li>
      <li><a data-toggle="tab" data-target="#qualifications">Minimum Qualifications</a></li>
      <li><a data-toggle="tab" data-target="#tuition">Tuition Costs</a></li>
      <li><a data-toggle="tab" data-target="#faq">FAQs</a></li>
  </ul>

  <div class="tab-content">
      <div class="tab-pane fade in active" id="Description">

        <h2>Lorem</h2>
      </div>

      <div class="tab-pane fade" id="qualifications">

        <h2>Ipsum</h2>
        
      </div>

      <div class="tab-pane fade" id="Description">

          <h2>Dolor</h2>
        
      </div>

      <div class="tab-pane fade" id="tuition">

        <h2>Sit Amet</h2>
         
      </div>

      <div class="tab-pane fade" id="faq">

        <h2>Bananas</h2>
            
      </div>
  </div>
</div>

<h2 class="page-header">
    Contact
</h2>

var appname = angular.module('appname');

appname.controller('indexController', ['$scope', '$sce', '$http', '$location',
function ($scope, $sce, $http, $location) {
    
      //alert($location.path());
      if ($location.path() == "/") {
          $scope.isIndexPage = true;
      }

}]);