Collection-repeat and paging

Folks,

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.
Example: http://codepen.io/pjp/pen/yBHav
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: http://codepen.io/pjp/pen/iwmlJ
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.