如何将活动类应用于Bootstrap Tab UI

Question

I've a bootstrap ui tab angularjs directive that sets the first tab as an active tab by default. Problem here is, if you are in tabs, other than the first tab, and try refreshing the page, since the default active class is on first tab, on refresh it shows first tab as active. However the content shown will be from the correct tab. Bootstrap directive:

var configDirectives = angular.module('configDirectives', []);

configDirectives.directive('configTabs', function(){
  return{
  restrict:'A',
  template: '\
  <ul class="nav nav-tabs">\
    <li class="active"><a href="#categories" data-    toggle="tab">categories</a></li>\
<li><a href="#uploadassets" data-toggle="tab">upload assets</a></li>\
<li><a href="#" data-toggle="tab">lorem ipsum</a></li>\
  </ul>'
}});

My question is : can we set this active class dynamically rather than hard-coding it in first li element?

Answer 1

Use ng-class with custom variable:

ng-class="{'active' : selectedType == 'categories'}"

And ng-click to select active tab (inside your a href or div or whatever):

ng-click="selectedTab = 'categories'"

Add 'selectedType' to the directive scope

scope: { selectedType: '=' }