Collection-repeat and paging


The app I’m writing has a massive list of a few thousand items, each with an image, and about 5 differently formatted data items. I’m looking at the best way of rendering this. Obviously at that amount of items the user will never scroll all the way down and I do have filters in the app to limit the data but when the full list is displayed at the app starting obviously the performance is awful.

Originally, I went with the idea of paging. A basic example of this for my testing is here:

The full data model is in a controller/service and I was using the limitTo ng-repeat option.

Since the collection-repeat functionality has been released this may be a better way to go for me. The full 6000+ data list though is still pretty slow when put onto an android phone.
So, I’ve looked at whether the collection-repeat could be used alongside the limitTo option. I think it can but then problem of have now is the “SHOW MORE” button at the bottom of my list doesn’t render in the right place now.
If someone can spot the issue here and help me fix that it would be fantastic.

For completeness, I’ve had a look at another post from this forum on using collection-repeat with infinite scroll (What about mixing “collection-repeat” and "ion-infinite-scroll?). A quick example I’ve put together on this doesn’t work properly:
I’m pretty happy to go with the MORE button though if I can get it implemented properly

Apologies for the long winded post. I’d appreciate any advice or fixes any of you have.