Nested state direct navigation - load before display ? Or something else?

Hello guys,

So I did this :

.state('app.guests', {
    url: '/guests',
    abstract: true,
    views: {
        'mainContent': {
            templateUrl: "views/guests/guests.html",
            controller: 'guestsCtrl'
        }
    }
})
.state('app.guests.list', {
    url: '/guests_list',
    views: {
        'guests_content': {
            templateUrl: "views/guests/guests_list.html",
            controller: 'guestsListCtrl'
        }
    }
})
.state('app.guests.invite', {
    url: '/guests_invite',
    views: {
        'guests_content': {
            templateUrl: "views/guests/guests_invite.html",
            controller: 'guestsInviteCtrl'
        }
    }
})

And I have a link somewhere like that :

<ion-item ui-sref="app.guests.invite">Invite</ion-item>

When clicking I do reach the wanted view with transition, but it displays first the container (guests.html) and then the inner content transition also to the wanted inner view. This is perfectly fine when moving between inner states, lets say from list to invite and back, but when loading from another part of the app, there should be only 1 transition with all the content.

Thanks ahead for any help !

Still need help on this ! I may get a codepen together to demonstrate the issue…