How to implment a "Load more" pagination in Angularjs without ng-repeat?

Question

Since ng-repeat redraws all items on events like model change, what would be a better approach to implementing a "load more" behavior/pagination in angularjs ?

Answer 1

What exactly are you seeing that makes you want to avoid ngRepeat? I've drafted up a simple example that illustrates what gets redrawn and what doesn't:

Example 1: http://jsfiddle.net/langdonx/uf2C9/

If you check the console, you'll see that when you click the add button to add another item to the model, only the newly added item gets rendered.

Example 2: http://jsfiddle.net/langdonx/uf2C9/2/

Manipulating every item in the model, still doesn't redraw the entire ngRepeat, it just updates what it needs to.

Example 3: http://jsfiddle.net/langdonx/uf2C9/1/

To help illustrate that Example 2 is sound, I added {{item.name}} to the image's src just to make sure it would change (which it does).

So what exactly are you trying to avoid?