Dynamically set tab in AngularUI Bootstrap (ui.bootstrap.tabs)

Question

I am using the tabs directive of AngularUI Bootstrap with dynamically generated tabs.

<div ng-controller="TabsDemoCtrl">
<uib-tabset active="activeForm">
  <uib-tab  index="$index" ng-repeat="tab in tabs" >
    <uib-tab-heading>{{tab.title}}</uib-tab-heading>
    {{tab.content}}
  </uib-tab>
</uib-tabset>

When the tabs array is changed the UI Tabs get amended accordingly but no active tab is set (although I explicitly do set in in the controller)

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' },
    { title:'Dynamic Title 4', content:'Dynamic content 4' }
  ];

  $scope.changeTabs = function(){
         $scope.tabs = [
       { title:'Dynamic Title 5', content:'Dynamic content 5' },
       { title:'Dynamic Title 6', content:'Dynamic content 6' }
     ];
     $scope.activeForm = 0; //Not working, how can I select tab dynamically?
  };

  $scope.model = {
    name: 'Tabs'
  };
});

Can anybody tell me what I am missing?

See here for Plunker: https://plnkr.co/edit/Ow7Cd1eidCgaLNOhX1Vl

Thanks in advance Paul

mindparse · Accepted Answer · 2016-09-26 10:41:07Z

3

You need to wrap the setting of activeForm in a $timeout:

$timeout(function(){
    $scope.activeForm = 0;
});

This is a known issue - https://github.com/angular-ui/bootstrap/issues/5805

Updated plunkr

answered Sep 26, 2016 at 10:41

mindparse

7,59529 gold badges105 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayant Patil · Accepted Answer · 2016-09-26 10:42:10Z

1

Hey here is code need to change

$timeout(function(){
 $scope.activeForm = 0; //Not working, how can I select tab dynamically? 
},0);

This will trigger digest cycle and your code will work

answered Sep 26, 2016 at 10:42

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Dynamically set tab in AngularUI Bootstrap (ui.bootstrap.tabs)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related