title: Modal window with custom URL in AngularJS
body: <p>I need to display a modal window (basically just a hidden div that will be loaded with a compiled template) in my Angular app. The problem is, I need the URL to change when the modal opens so users can copy the link and go directly to the modal window and also use the back button to close the modal window and return to the previous page. This is similar to the way Pinterest handles modal windows when you click on a pin.</p>
  
  <p>So far I've created a directive that loads the template, compiles it using $compile, injects the $scope and then displays the compiled template. This works fine. </p>
  
  <p>The problem is as soon as I use $location to change the path, the route controller fires and loads the template into ng-view.</p>
  
  <p>I thought of 2 ways of overcoming this, but have not been able to implement either:</p>
  
  <ol>
  <li><p>Somehow prevent the route controller from firing when I change the url using $location. I've added a listener to $routeChangeStart to prevent the default from happening, but that does not seem to work.</p></li>
  <li><p>Somehow add another view handler to the page (basically have 2 named ng-view directives on the page) and have each able to handle different routes. Can't see that Angular supports this at the moment though.</p></li>
  </ol>
  
  <p>The URL needs to be of the format /item/item_id and not /item?item_id=12345.</p>
  
  <p>Any help would be appreciated.</p>