In Angularjs with ui-router how to change hash without reloading controller but keeping subviews routing enabled

Question

In short: my demo, how to have subviews? (without reloading page)

Longer:

I'm using snapscroll to provide different screens effect (demo). This directive doesn't support by default ui-router so I had to do it myself.

When you move the mouse wheel beforeSnap event event is triggered. I call ui-router $state.go to change URL hash. I don't reload the controller.

$scope.beforeSnap = function (snapIndex) {
    $state.go('view' + snapIndex,{},{
        notify:false,
        reload:false, 
        location:'replace', 
        inherit:true
    });
};

Routing is like

.state('main', {
    url: '/',
    templateUrl: 'views/screens.html',
    controller: 'mainCtrl'
})
.state('view0', {
    url: '/green',
    templateUrl: 'views/screens.html',
    controller: 'mainCtrl',
    params: {'color': 'green', 'screenIndex': 0}
})
[...]

views/screens.html:

<div fit-window-height="" snapscroll="" snap-index="snapIndex" before-snap="beforeSnap(snapIndex)">
    <div class="green"></div>
    <div class="blue">
        <!-- How to enable these subviews? -->
        <!-- <a ui-sref="view0.a">Go to view0.a</a> -->
        <!-- <a ui-sref="view0.b">Go to view0.b</a> -->
        <div ui-view="view1"></div>
    </div>
    <div class="red"></div>
    <div class="yellow">
        <div ui-view="view3"></div>
    </div>
</div>

You can see a codepen and a demo.

The issue is that I want to have subviews in some "screens" (colours divs), e.g: view1 and view3. But I don't know how to do it without reloading the whole page. Subviews like:

• /view1/a
• /view1/b
• /view3/a
• /view3/b
• /view3/c

Besides, I think screens would be better/cleaner being children of main main.view0, main.view1, etc.

I read about multiple named views in ui-router and nested states without success.