I have a question regarding my Angular Bootstrap UI.

I have something like:

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

My problem is everytime I add active='true' in my tab, I get:

TypeError: undefined is not a function
    at Object.fn (.10.0.js:2762:11)
    at h.$digest (.2.15/angular.min.js:106:71)
    at h.$apply (.2.15/angular.min.js:108:370)
    at g (.2.15/angular.min.js:71:120)
    at C (.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (.2.15/angular.min.js:76:280) 

I've searched google and moved jQuery file loaded before Bootstrap file but still getting the same error. Can anyone help me about it? Thanks a lot!

I have a question regarding my Angular Bootstrap UI.

I have something like:

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

My problem is everytime I add active='true' in my tab, I get:

TypeError: undefined is not a function
    at Object.fn (http://test./lib/ui-bootstrap-tpls-0.10.0.js:2762:11)
    at h.$digest (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:106:71)
    at h.$apply (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:108:370)
    at g (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:71:120)
    at C (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (http://ajax.googleapis./ajax/libs/angularjs/1.2.15/angular.min.js:76:280) 

I've searched google and moved jQuery file loaded before Bootstrap file but still getting the same error. Can anyone help me about it? Thanks a lot!

• javascript
• css
• angularjs
• twitter-bootstrap
• angular-ui-bootstrap

• 1 Is it me or you used active="true' instead of active="true" ?? – Zerquix18 Commented May 7, 2014 at 22:09
• @Zerquix18 that was a typo. thanks for pointing it out. – FlyingCat Commented May 7, 2014 at 22:10
• @drew_w what is myTabs[1]? Is myTabs an id? – FlyingCat Commented May 7, 2014 at 22:22

2 Answers 2

The short answer is exactly what you reference in your question - if you set active to true either in code or in the HTML, it selects the tab. There are two ways to create tabs:

• Static Tabs:

  <tabset id="tabs">
    <tab heading="Title1"></tab>
    <tab heading="Title2" active="true"></tab>
    <tab heading="Title3"></tab>
  </tabset>
  

  Here if you set active="true" the tab will be the default active tab.

• Dynamic Tabs:

  HTML

  <tabset id="tabs2">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"></tab>
  </tabset>
  

  Javascript

    $scope.tabs = [
      {"title": "Dynamic 1", "active": false},
      {"title": "Dynamic 2", "active": true},
      {"title": "Dynamic 3", "active": false}];
  

To see both of these working, check out this plunker: http://plnkr.co/edit/nR9GNIhGAmha8Rh85lUa?p=preview

The tab's active property must point to a variable and not a constant. You're telling the second tab to always be active.

active also can't be an expression. It seems they are working on changing how active works. Check out this github issue for more.