Angularjs UI bootstrap temporarily change URL on open and revert to original URL on close

Question

I want to temporarily change the browser url when the ui bootstrap modal is opened ( The page behind should remain as is, only the url changes ). When the modal is closed the url should be reverted back to the original one.

Steps :

1. User loads the page
   • url : xyz.com/home
2. User clicks a link opens a modal
   • url : xyz.com/detail/123
   • possible solution : changing url with html5 push state
   • problem : Angular ui-router tries to run its routes as per the changed url, eventually changing the background page.
3. User closes the modal
   • url : xyz.com/home
   • possible solution : html5 pop state
   • problem : Reloads the background page, which kills the purpose

Example implementation : Pinterest pins and their pin details popup.

Answer 1

Managed to implement this using https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodal