单击时，突出显示的活动选项卡不会切换。使用Angularjs ui-router ui-bootstrap选项卡

Question

我正在使用Angularjs ui-router ui-bootstrap选项卡。 它适用于http://plnkr.co/edit/EYLsPRlxEXQP4HsXuPKK?p=info但不适用于我的网站。单击时，活动选项卡不会突出显示。但是加载了正确的内容。

var app = angular.module('Plunker', ['ui.router', 'ui.bootstrap'])

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

      .state('tab1', {
            url: '/tabpage1',
            templateUrl: 'tab1.html',
            controller:'tabsController' 
      })
      .state('tab2', {
            url: '/tabpage2',
            templateUrl: 'tab2.html',
            controller:'tabsController' 
      })

      .state('tab3', {
            url: '/tabpage3',
            templateUrl: 'tab3.html',
            controller:'tabsController' 
      })

    $urlRouterProvider.otherwise('/');
});

app.controller('tabsController',['$scope','$state',function($scope, $state){
    $scope.tabs = [
    { title: 'Announcements', route:'tab1', active:false},
    { title: 'Course Info', route:'tab2', active:true},
    { title: "Timetable", route: "tab3", active: false },
];


}]);

有人可以建议吗？ 谢谢。