title: Browser back button doesn't trigger reload after using Angular's $location.path() update
body: <p><strong>Situation:</strong></p>
  
  <p>On one of the views of my AngularJS app I have two pagination buttons that use $http to request the next and previous data. I'm using <code>ng-click="getNext(url)"</code> rather than an anchor tag with <code>href="#/items/:itemId"</code>. The reason I'm doing this is so that I can quickly page through my content asynchronously w/o triggering a page reload. This works just fine, but using this method bypasses updating the page's URL so its possible to have your current content out of sync with your URL's id (i.e. path is #/items/3 but you're currently viewing item 9). This can be easily fixed by updating the URL in the JS using <code>$location.path('items/' + rsp.id)</code>. Now I can fetch data in an async manner and still be able to refresh, bookmark, send links and have the correct/current item display.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>The problem with this is if a user hits <code>getNext()</code> a few times and then tries to go back using the browser's back button the URL updates like it should but for some reason the browser doesn't perform a refresh–it just sits there and updates the URL. This only occurs with when the item in history is from the same view and I have updated the ID with the location service. </p>
  
  <p>Any ideas would be appreciated.</p>
  
  <p><strong>What I tried so far</strong></p>
  
  <p><em>Promises + Flags</em></p>
  
  <p>I've been playing with <code>window.onpopstate</code>, but as of right now I don't have any way to have <code>window.onpopstate</code> differentiate between a browser click and a UI click that updates the URL with <code>$location.path()</code>; Right now it fires the event regardless of the source. So I tried setting a flag to assume that every time this event fires its a browser event, but when its a UI-based event I can disabled that flag because my _myRequestFn() will handle it. Even with this promise setup it still fires the window.onpopstate when _myRequestFn() is fired.</p>
  
  <pre><code>var flag = true; // Assume all requests are browser-based
  
      window.onpopstate = function() {
        if (flag) {
          $route.reload();
        }
        console.log('onpopstate fired');
      };
  
      _myRequestFn = function(id) {
          someService.getMyData(id)
            .then(function(rsp) {
             // Do a bunch of stuff including...
             $location.path('items/' + rsp.id);
             return rsp;
            })
            .then(function() {
               // Everything is done reset flag
               flag = true;
            });
      };
  
  $scope.getNext(url) {
     flag = false;
     _myRequestFn(url);
  };
  </code></pre>
  
  <p><em>Spoofing</em></p>
  
  <p>Hitting back through #/item/5 > #/item/4 > #/item/3 just updates the URL and not the path, but if the history has a different param #/thing/2 > #/item/2 that triggers a page refresh. Since the browser back button works if the history is from a different param I wanted to see if I loaded a different param it would work. So I created an #/item-a and #/item-b route that loaded the same template and used the same controllers, just toggled from a/b with each request. I would never recommend this solution to someone, I was more just seeing if I could get the refresh to trigger.</p>
  
  <p><strong><em>Update</em></strong>
  Lots of people on IRC are suggesting that I use UI-Router. I'm really trying to use the out of the box Angular solution. Refactoring my whole routing setup to use UI-Router is not an optimal solution.</p>