UI Corner Tabs - Change the active tab programmatically

Question

I have a web page with two corner tabs. I am adding a new button to this page, and I want to add this button: by clicking the button, change the tab to another tab.

For instance:

• If the current active tab is "first", activate the "second" tab.
• if the current active tab is "second" - activate the "first" tab.

Here is my (non) 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 am sure that one of my problems depends on the segment active="selected". This is since I expect the variable to be placed in $scope, while it works in a divided area (set of tabs). I tried to work around this problem by changing this segment to active="$parent.$parent.selected"- without success.

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

  $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 UT 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 the documentation ( http://angular-ui.imtqy.com/bootstrap/versioned-docs/0.14.3/#/tabs for more details )

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

PS. 1.2.0 . , :)