Onsen UI タブからタブへの移動はできるのでしょうか？


表題の通りです。出来るのかできないのかもわかりません。  
よろしくお願いします。

[code]

    <ons-tabbar>
      <ons-tab page="home.html" active="true">
        <ons-icon icon="ion-home"></ons-icon>
        <span style="font-size: 14px">Home</span>
      </ons-tab>
      <ons-tab page="fav.html" active="true">
        <ons-icon icon="ion-star"></ons-icon>
        <span style="font-size: 14px">Favorites</span>
      </ons-tab>
      <ons-tab page="settings.html" active="true">
        <ons-icon icon="ion-gear-a"></ons-icon>
        <span style="font-size: 14px">Settings</span>
      </ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
      ここから
    </ons-template>
    
    <ons-template id="fav.html">
      ...
    </ons-template>
    
    <ons-template id="settings.html">
      ここへ移動したい
    </ons-template>
    
[/code]




`<ons-tabbar>`にはタブを切り替えるためのメソッド`setActiveTab()`が用意されているので、それを利用すると良いでしょう。  
下記のスニペットを実行してみてください。

[code]

    angular.module('app', ['onsen'])
    .controller('PageController', function($scope){
      $scope.changeTab = function(index){
        $scope.tabbar.setActiveTab(index);
      };
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css" rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>
    
    <body ng-app="app">
      <ons-tabbar var="tabbar">
        <ons-tab icon="home" page="page1.html" active="true"></ons-tab>
        <ons-tab icon="user" page="page2.html"></ons-tab>
        <ons-tab icon="gear" page="page3.html"></ons-tab>
      </ons-tabbar>
      <ons-template id="page1.html">
        <ons-page ng-controller="PageController">
          <h1>page1</h1>
          <ons-button ng-click="changeTab(0)">Tab1</ons-button>
          <ons-button ng-click="changeTab(1)">Tab2</ons-button>
          <ons-button ng-click="changeTab(2)">Tab3</ons-button>
        </ons-page>
      </ons-template>
      <ons-template id="page2.html">
        <ons-page ng-controller="PageController">
          <h1>page2</h1>
          <ons-button ng-click="changeTab(0)">Tab1</ons-button>
          <ons-button ng-click="changeTab(1)">Tab2</ons-button>
          <ons-button ng-click="changeTab(2)">Tab3</ons-button>
        </ons-page>
      </ons-template>
      <ons-template id="page3.html">
        <ons-page ng-controller="PageController">
          <h1>page3</h1>
          <ons-button ng-click="changeTab(0)">Tab1</ons-button>
          <ons-button ng-click="changeTab(1)">Tab2</ons-button>
          <ons-button ng-click="changeTab(2)">Tab3</ons-button>
        </ons-page>
      </ons-template>
    </body>
[/code]

