I'm building a dashboard/control panel app that is basically made up of two tabs (bootstrap) at the root level, called "dispatch" and "admin". Each tab has a good bit of its own multi-tiered navigation and functionality, and they don't need to directly interact with each other. The problem I'm running into is how to deep-link to sub-views within one of the tabs without losing the "state" of the inactive tab. To clarify, I can achieve this just fine if I don't worry about updating the URL, but when I try to add deep-linking, that's when I get stuck.

An example of the desired behavior:

When you click on the "Admin" tab, the route becomes "/admin" Click on a sub-nav item, route becomes "/admin/foo" Select 3rd-tier sub-level item, route becomes "admin/foo/thing1" Click on the "dispatch" tab, route becomes "/dispatch" Click back on the "admin" tab, route goes back to "admin/foo/thing1"

So basically, if you're at the "admin/foo/thing1" route in the middle of filling out a text field, then switch to another tab, then switch back, the text field should still be there just as you left it.

Like I said, the problem isn't switching from tab to tab, since by default the tabs just show and hide things on the page without reloading any views dynamically. I just don't know how to deep-link to a given tab's "bookmarked" position when you switch to it. The way I keep thinking of it is that clicking on a tab should only update the first segment of the URL( /admin or /dispatch ), and then some sort of $watch function would update the remaining segments based on the last "location" within that tab. Would something like that work?

Also, I'm using ui-router to handle all my routing and states, so I have to factor that into how I'm going to handle the desired behavior.

Help?