You can do this pretty easily.
Set up separate states for each tab at the same level
1) Register a $stateChangeSuccess listener on $rootScope
. If the to state .includes("left")
or .includes("right")
, then keep track of the destination state and its stateParams.
2) Register a $stateChangeStart listener on $rootScope
. If the to state .is("left")
or .is("right")
, then prevent the transition directly to the tab state, and then use $state.go
to the state/params you saved earlier for that tab.
Have a look at my ui-router fork which implements this. I call it "deep state redirect". https://github.com/christopherthielen/ui-router/blob/issue-894/src/parallelState.js#L32
I made a plunk and integrated the scope listeners and registry from my fork to the root scope in the plunk. Have a look: http://plnkr.co/edit/2EDS21yD6ygI5nHMFu0H?p=preview