Hot to efficiently update a list with AngularJS and ng-repeat

Lets assume I have a list of items that are rendered from $scope.items using ng-repeat. This list is fairly large and updated regularly, but only single items are updated at a time, eg. 12 updates on Item 2, then 2 updates on Item 359, then 89 updates on Item 1071, etc.

From what I understand, updating the single items in $scope.items list will cause AngularJS to rerender the complete list, even if most items have not changed at all. This seems like a pointless thing and can surely handled in a more efficient way. I could use tools like jquery and update the DOM myself, but that seems to defeat the point of AngularJS in a big way. Is there any way in AngularJS to update single list elements in an ng-repeat generated model?

This would depend on how you are setting up your bindings and your updates. If you have a large list, do an update, send to the server and replace the entire list with the return from the server, yes, you are going to re-render. But if you just update the one piece of information you need to update, send that atomic piece of information to the server, there is no reason to re-render the entire set of data.

If you are concerned or really want to put 10,000 items on screen at once, have a view mode and edit mode for the rows. You can use one-way binding (https://github.com/abourget/abourget-angular) to render the read-only version and when in edit mode, display a form with two-way binding. This would significantly increase the number of items you can show on screen at any given time while still allowing you to edit each item.

For people landing on this topic like I did. Check out the 'track by' augmentation of the ngRepeat directive.

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm https://docs.angularjs.org/api/ng/directive/ngRepeat

cheers