Nested Tabs and ui-router

1

Hi all,
for a project I have to create two level of tabs and navigate through them (sorry but the page is in Italian language).

image
Schermata 2015-08-08 alle 17.03.29.png400×704 34.2 KB

The bottom tabs guide the first level of tabs, while the top one the second level.
With the navigation it’s all ok, but when I try to see the item details I can’t figure out what’s wrong with my configuration:

$stateProvider
    .state('signin', {
      url: "/sign-in",
      templateUrl: "templates/sign-in.html",
      controller: 'SignInCtrl'
    })
    // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
    })
    .state('tab.dash', {
    url: '/dashboard',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
    })
    .**state('tab.profile', {**
    url: "/profile",  
    **abstact:true,**
    **views: {**
        **'tab-profile': {**
            **templateUrl: "templates/tab-profile.html"**
        **}**
    **}**
    **})**
    **.state('tab.profile.campionati', {**
    **url: '/campionati',**
    **views: {**
      **'profile-page': {**
        **templateUrl: 'templates/profile/tab-campionati.html',**
        **controller: 'DashCtrl'**
      **}**
    **}**
    **})**
    **.state('tab.profile.calciatori', {**
    **url: '/calciatori',**
    **views: {**
      **'profile-page': {**
        **templateUrl: 'templates/profile/tab-calciatori.html',**
        **controller: 'PlayerProfileCtrl'**
      **}**
    **}**
    **})**
    **.state('tab.profile.calciatori.guest', {**
      **url: '/guest/:id',**
      **views: {**
        **'stocaxxo': {**
          **templateUrl: 'templates/calciatore/profilo-guest.html',**
          **controller: 'PlayerProfileCtrl'**
        **}**
      **}**
    **})**
    .state('tab.profile.polisportive', {
    url: '/polisportive',
    views: {
      'profile-page': {
        templateUrl: 'templates/profile/tab-polisportive.html',
        controller: 'FollowCtrl'
      }
    }
    })
    .state('tab.follow', {
      url: '/follow',
      views: {
        'tab-follow': {
          templateUrl: 'templates/tab-follow.html',
          controller: 'FollowCtrl'
        }
      }
    })
    .state('tab.chat.detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-details.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })
    .state('tab.contact', {
      url: '/contact',
      views: {
        'tab-contacts': {
          templateUrl: 'templates/tab-contact.html',
          controller: 'ChatDetailCtrl'
        }
      }
    })
    .state('tab.info', {
    url: '/info',
    views: {
      'tab-info': {
        templateUrl: 'templates/tab-info.html',
        controller: 'AccountCtrl'
      }
    }
    });

  $urlRouterProvider.otherwise('/sign-in');

The tab.profile.calciatori and tab.profile.calciatori.guest are the parts of the code is where I configured the navigation from the list of items to the details page. The second level of tabs is in the page ‘templates/tab-profile.html’:

<ion-view title="DASHBOARD">
    <ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-light">
        <ion-tab title="CAMPIONATI" ui-sref="tab.profile.campionati">
                championships
        </ion-tab>
        <ion-tab title="CALCIATORI" ui-sref="tab.profile.calciatori">
                soccer players
        </ion-tab>
        <ion-tab title="POLISPORTIVE" ui-sref="tab.profile.polisportive">
                sports clubs
        </ion-tab>
    </ion-tabs>
    <ui-view name="profile-page"></ui-view>
</ion-view>

and the page with the url to details page is:

<ion-view view-title="CALCIATORI">
  <ion-content class="has-header has-subheader">
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="profile in profiles" type="item-text-wrap" ui-sref="tab.profile.calciatori.guest({ id: profile.id})">
        <img ng-src="{{profile.avatar}}">
        <h2>{{profile.name}} {{profile.surname}}</h2>
        <p>{{profile.ruolo}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

please help me.
Thanks
Danilo