Some time ago we decided to switch to AngularJS + UI-Router for our primary web product and we are glad with it, but now we faced a problem implementing specialized functionality as we need to bind two states to the same URL.
As many websites out there, we have a search which prodices a grid of items where you can click any and you'll be presented with popup showing clicked product in a more detailed way. From that popup, user can move back/forward throught the list of fetched results.
And we also have a standalone page for that item (used when user arrives by clicking a link from outside, or when web crawler traverses our pages). Both of them share the same URL, and thus we need to show it in address bar.
It's quite clear that standalone page uses its own state, while that popup has another state, but both of them have the same URL. We could not find any proper way of achieving what we've designed. As you may noted we're actually need to manage history stack here and pop all the results when user closes popup. But that's another story.
For now, there is a need to make that popup and standalone use same URL and be bound to different states. Is that possible? Or maybe there are some hacks/tricks to make it possible?
Thanks in advance.