How to separate Ionic view into multiple views

I'm having trouble separating my app into multiple reusable componenents. I have a page in which I want a list on the left of the screen and when an item of this list is selected, its details displayed on the right.

I have my

 .state('app.test', {
                url: "/test",
                views: {
                    'menuContent': {
                        templateUrl: "templates/main.html",
                        controller: "TestCtrl"
                    },
                    'testList@app.test': {
                        templateUrl: "partials/list.html",
                        controller: "TestListCtrl"
                    },
                    'testDetails@app.test': {
                        templateUrl: "partials/details.html",
                        controller: "TestDetailsCtrl"
                    }
                }

where test.html should load one.html only contains

<ion-nav-view name="testList"></ion-nav-view>
<ion-nav-view name="testDetails"></ion-nav-view>

Now in partials I have

<ion-content class="has-header">
    <div class="list card">
        Details
    </div>
</ion-content>

and the other contains my "detailed" view.

The problem is only the last <ion-nav-view> gets rendered.. What am i doing wrong ? Maybe I started on a wrong design, so how can I separate thing so that I have : a list on the left side of the screen and its details on the right side while keeping two "scrolls" separate ? (I don't want the details to be scrollable)