title: AngularJs / Scrolling infinite and back button
body: <p>Let's suppose a web page located at <code>/items</code>, listing all the available items.<br>
  When the user clicks on one item, the browser shows <code>/items/:itemId</code> and present the item's details.</p>
  
  <p>Of course, the items list could be very large.<br>
  That's why I'm using the <a href="http://ionicframework.com/docs/api/directive/ionInfiniteScroll/" rel="nofollow">scroll infinite feature from Ionic</a> (Framework I'm using based on Angular).</p>
  
  <p>However, as many developers know, handling the "back button" from <code>/items/:itemId</code> to <code>/items</code> is tricky since the Angular's controller is destroyed during the page transition and then rebuilt when the list page is loaded again.<br>
  Therefore losing the scroll position and the exact items already loaded before clicking on an item's detail.</p>
  
  <p>I think about some solutions, but I hesitate since all have a "drawback": </p>
  
  <ul>
  <li><p>Storing the actual loaded items (the complete items) in <code>$cacheFactory</code> (Angular's cache or localStorage) just before the item details is about to be shown.<br>
  Thus, when the back button is pressed (on the detail page), the <code>/items</code>'s controller can init the data from the cache, and besides the scroll position could then be easily "remembered".<br>
  Drawback is that the data in cache may be stale...</p></li>
  <li><p>"No need to store any loaded items in cache!" Just store in cache or localStorage the actual number of chunks loaded.<br>
  For instance, my REST API allows to retrieve items 10 by 10.<br>
  If the user's was loaded up to the second chunk (up to 20 elements so), a variable in cache would contain this value and the controller could then be init with all the 20 items initially.<br>
  Drawback is that it would involve several requests to server. Indeed, if the user loaded 30 chunks, the controller would need to make 30 calls to server...
  I could customize the size of chunk processed by the server, but one item is heavy (several long texts etc.. lists of anything), explaining why I limited to a relatively small number. </p></li>
  <li><p>Using a bidirectional scrolling (top and bottom), so that there's ALWAYS 10 items in the DOM.      I would just need to store the last number of chunk already loaded, in order to reload it.<br>
  Drawback: I would have to write my directive myself (possible so) since there's no Angular (neither from Ionic) directive currently.<br>
  And I imagine that bidirectional is useful only when dealing with very very large list: more than 2000 rows, in order to lighten the DOM.<br>
  I don't expect more than 400 rows in a majority of my cases... </p></li>
  </ul>
  
  <p>What is a good practice? Maybe another solution?  </p>