Angular UI tabs - change active tab programmatically

Question

I have a webpage with two angular ui tabs. I adding a new button into this page and I want to add this button-click behavior: when the button clicked, swap the tab to the other tab.

For example:

• If the current active tab is "first" - make the "second" tab to be active.
• if the current active tab is "second" - make the "first" tab to be active.

Here is my (not) working example: http://plnkr.co/edit/2ajxz7oGYmF8oPlHc8kc

<uib-tabset type="pills" active="selected">
  <uib-tab heading="First" index="1">
    First data
  </uib-tab>
  <uib-tab heading="Second" index="2">
    Second data
  </uib-tab>
</uib-tabset>

I'm pretty sure that one of my problem is depending on the active="selected" segment. This since I'm expecting that the variable will be placed on $scope, while it's running on separated scope (of the tab-set). I tried to pass this issue with workaround by change this segment to active="$parent.$parent.selected" - with no success.

So, the main problem is the swap() function:

  $scope.swap = function() {
    alert($scope.selected);
    if ($scope.selected == 1)
      $scope.selected = 2;
    else
      $scope.selected = 1;
  }

How should I do it right?

Answer 1

You are using an old version of Angular UI Bootstrap (0.14.3)

<uib-tabset>
  <uib-tab heading="First" active="selected == 1">
    First data
  </uib-tab>
  <uib-tab heading="Second" active="selected == 2">
    Second data 
  </uib-tab>
</uib-tabset>

See documentation for more info (http://angular-ui.github.io/bootstrap/versioned-docs/0.14.3/#/tabs)

Also a working Plunkr (http://plnkr.co/edit/qAbUtv06ck64JCf8JaKp?p=preview)

PS. Your code above works for versions 1.2.0 above. If you have the option to upgrade versions, you can do it as well :)