AngularJs / Scrolling infinite and back button

Let's suppose a web page located at /items, listing all the available items.
When the user clicks on one item, the browser shows /items/:itemId and present the item's details.

Of course, the items list could be very large.
That's why I'm using the scroll infinite feature from Ionic (Framework I'm using based on Angular).

However, as many developers know, handling the "back button" from /items/:itemId to /items is tricky since the Angular's controller is destroyed during the page transition and then rebuilt when the list page is loaded again.
Therefore losing the scroll position and the exact items already loaded before clicking on an item's detail.

I think about some solutions, but I hesitate since all have a "drawback":

• Storing the actual loaded items (the complete items) in $cacheFactory (Angular's cache or localStorage) just before the item details is about to be shown.
  Thus, when the back button is pressed (on the detail page), the /items's controller can init the data from the cache, and besides the scroll position could then be easily "remembered".
  Drawback is that the data in cache may be stale...

• "No need to store any loaded items in cache!" Just store in cache or localStorage the actual number of chunks loaded.
  For instance, my REST API allows to retrieve items 10 by 10.
  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.
  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.

• 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.
  Drawback: I would have to write my directive myself (possible so) since there's no Angular (neither from Ionic) directive currently.
  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.
  I don't expect more than 400 rows in a majority of my cases...

What is a good practice? Maybe another solution?