How to switch to the nested the taps

hi,guys.i got a problem like the images below:
i want to switch to the leave or hot page after i click [leave ]tag or [home] tag (these two 2 tags on freeride home page,when u click the [freeride] ,show FreeRide home page [seeing screen 2]) ,how to complete it?
screen1


screen2
image
screen3
image
file struct

app.js
angular.module(‘ionicApp’, [‘ionic’])

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider .state('tabs', {
            url: "/tab",
            abstract: true,
            templateUrl: "templates/tabs.html"
        })
        .state('tabs.home', {
            url: "/home",
            views: {
                'home-tab': {
                    templateUrl: "templates/home.html",
                    controller: 'HomeTabCtrl'
                }
            }
        })
        .state('tabs.freeride', {
            url: "/freeride",
            views: {
                'home-tab': {
                    templateUrl: "templates/FreeRide/freeride.html"
                        //        controller: 'questionsAnswersCtrl'
                }
            }
        })
        .state('tabs.freeride.return', {
            url: "/return",
            views: {
                'freeride-return': {
                    templateUrl: "templates/FreeRide/return.html"
                }
            }
        })
        .state('tabs.freeride.leave', {
            url: "/leave",
            views: {
                'freeride-leave': {
                    templateUrl: "templates/FreeRide/leave.html"
                }
            }
        }) ;

    $urlRouterProvider.otherwise("/tab/home");

freeride.html

 <ion-view title="FreeRide">
    <ion-tabs class="tabs-positive tabs-striped tabs-top">
        <ion-tab title="Home">
            <ion-view>
                <ion-content class="calm-bg">
                 return-detailsle.html
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="Leave">
            <ion-view>
                <ion-content class="balanced-bg">
                  leave-detail。html
                </ion-content>
            </ion-view>
        </ion-tab>
        <ion-tab title="Hot">
            <ion-view>
                <ion-content class="energized-bg">
                   hot
                </ion-content>
            </ion-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

i tried to add “ui-href” or " href" , it does not work here.

how to implement the function? hope to get ur help and guide. thanks in advence.