title: Angularjs how to cancel resource promise when switching routes
body: <p>I'm just getting my feet wet with Angularjs. I have an issue which I think has something to do with promises.</p>
  
  <p>Let's say I load route 'A' which makes several ajax requests through it's controller:</p>
  
  <pre><code>allSites = AllSites.query({ id:categoryID });
  
  allSites.$promise.then(function(allSites){
      //add stuff to the scope and does other things 
      //(including making another ajax request)
  });
  </code></pre>
  
  <p>Then I have route 'B' which makes it's own API request through it's controller:</p>
  
  <pre><code>$scope.categories = Category.query();
  </code></pre>
  
  <p>Here's the factory service currently used by route 'A':</p>
  
  <pre><code>.factory('AllSites',function($resource){
      return $resource('api/categorySites/:id');
  });
  </code></pre>
  
  <p>When I first view route 'A' but then switch to 'B' before 'A' is finished loading, route 'B' sits and waits for everything initially requested in 'A' to finish (actually, the query() request is made, but it won't resolve until the one from 'A' does, at that point, the stuff inside <code>.then()</code> continues to happen, even though I don't need it as I'm now on another route.</p>
  
  <p>As you can see in my devtools timeline, the green line indicates when I switched to route 'B'. The request for route 'B' didn't resolve until the two requests above did (a request that is usually very fast). (at which point I'm able to use the view as a user). Then, after that, more promises resolve from route 'A'.</p>
  
  <p><img src="https://i.stack.imgur.com/Xc4sZ.gif" alt="My devtools"></p>
  
  <p>I've searched everywhere for an answer and can only find people that want to "defer" the route loading until promises are resolved. But in my case I almost want the opposite. I want to kill those requests when I switch.</p>
  
  <p>Here's someone else with the same, unanswered question: <a href="https://stackoverflow.com/questions/24352236/reject-angularjs-resource-promises">Reject Angularjs resource promises</a></p>
  
  <p>Any help is appreciated.</p>