AngularJS Ui-router - Keep sub ui-view changes between tabs (sticky states)

Question

I am struggling trying to make two tabs to keep an independent behavior using UI-ROUTER.

Here is the scenario:

Person details editor with tabs:

• Tab 1: Basic Person Info @ ui-view="basic"
• Tab 2: Addresses grid -> edit address state @ ui-view="addresses"
• Tab 3: Contacts grid -> edit contact state @ ui-view="contacts"

Mapping:

.state('order.person', {
 views : {
   'person@order' : {
     templateUrl : 'personTabs.html' // contains the 3 ui-view mentioned above
   },
   '[email protected]' : {
     templateUrl: 'basicInfoForm.html'
   },
   '[email protected]' : {
    templateUrl: 'addressesGrid.html'
   },
   '[email protected]' : {
    templateUrl: 'contactsGrid.html'
   }
 }
})
.state('order.person.address', {
 views : {
   '[email protected]' : {
     templateUrl: 'addressEditor.html'
   }
 }
})
.state('order.person.contact', {
 views : {
   '[email protected]' : {
     templateUrl: 'contactEditor.html'
   }
 }
})

When the 'order.person' state is enabled, we do have the three tabs loaded, including both addresses and contacts data grids.

So when the user edits an address from the grid, the 'order.person.address' state gets enabled, and the addresses grid slot is replaced by the addressEditor.html.

The problem is when the address editor is enabled and in the other tab the user clicks to edit a contact from the grid. When 'order.person.contact' is enabled, the 'order.person.address' is exited and the addresses grid is reloaded.

I expect the user to be able to show/edit address and contact records independently.

I tried to enable the ui-router-extras and mark the states with "sticky : true", but it really didn't make any difference.

What is the trick to make this work?

Thank you all