Default Active Tab in Ionic

ionic-v1
1

Hi,
I am Ionic1 newbie and need help with the following questions:

  1. figuring out how the default active tab mechanism works. Currently, there are 3 tabs in state ‘app.article.details’ and the default active tab is the third one. I would like it to be the first tab as seen in this example.
    I am not able to find out why in my App the default is the third tab and in the example is the first tab.

  2. Why the back button does not appear when entering any of the ‘app.article.details’ states?

Any help is warmly welcomed.

My Code:

app.js:

.state('app', {
          url: "/app",
          abstract: true,
          templateUrl: 'app/layout/side-menu.html'
        });
      $urlRouterProvider.otherwise('/app/home');

side-menu.html:

  <ion-side-menu-content>
    <ion-nav-bar class="bar-dark">

      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        .......
      </ion-nav-buttons>

      <ion-nav-buttons side="right">
      ....
      </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

   </ion-side-menu-content>

home.route.js:

 .state('app.home', {
        url: '/home',
        templateUrl: 'app/home/home.html',
        controller: 'HomeController',
        controllerAs: 'vm',
      });

home.html:

…
ENTER
…

article.route.js:

 .state('app.article', {
            abstract: true,
            templateUrl: 'app/article/articleTabs.html',
          })

 .state('app.article.details', {
            url: '/home/:articleID',
              views: {
                'first-tab': {
                  templateUrl: 'app/article/article.html',
                  controller: 'ArticleController',
                  controllerAs: 'vm',
                },
                'second-tab': {
                  templateUrl: 'app/article/article.html',
                  controller: 'ArticleController',
                  controllerAs: 'vm',
                },
                'third-tab': {
                  templateUrl: 'app/article/article.html',
                  controller: 'ArticleController',
                  controllerAs: 'vm',
                }
              }
          });

articleTabs.html:

<ion-tabs>
  <ion-tab title="First" ui-sref="app.article.details">
    <ion-nav-view name="first-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Second" ui-sref="app.article.details">
    <ion-nav-view name="second-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Third" ui-sref="app.article.details">
    <ion-nav-view name="third-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

article.html:

<ion-view>
  <ion-nav-buttons side="secondary">
    <button class="button button-large ion-ios-location" ng-click="vm.doSomething()">
    </button>
  </ion-nav-buttons>
  <ion-content has-bouncing="false" overflow-scroll="true">
    ...........
    </div>
  </ion-content>
</ion-view>