how to position multiple views in ionic

I am trying to use ionic Framework to build a content menu which has 2 parts, coming from different controllers. I have specified them as view: menuContent and view: menuSubcontent below.

HTML

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="main bar-stable nav-title-slide-ios7">
            <ion-nav-back-button class="button-clear"><i class="icon"></i></ion-nav-back-button>
        </ion-nav-bar>

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

    </ion-side-menu-content>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-stable">
            <h1 class="title">Left</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item nav-clear menu-close ng-click="login()">
                    Login
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/morestuff">
                    etc.
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

ROUTER

.state('app.playlists', {
    url: "/playlists",
    views: {
        'menuContent': {
            templateUrl: "templates/playlists.html",
            controller: 'PlaylistsCtrl'
        },
        'menuSubcontent': {
            template: "<span>subcontent of playlists</span>"
            }
        }
    })

When the page renders, the <ion-nav-view name="menuSubcontent"> is not visible although it is in the DOM. I added some CSS properties to make it visible:

z-index: 2
margin-top: 400px; /* some arbit large number */

I was wondering if this is the right approach (adding my own css classes to menuSubcontent) or is there systematic way of using the framework which takes out the guesswork in positioning with multiple views. I am still learning how to use this framework.