Buttons inside ng-repeat

Problem

I've got a repeater on a table row with its collection that updates often. The table row contains a button.

If the user clicks the button at the same time that the repeater's collection is updated, the button's event is not fired. Reason seems to be that user is clicking at the same time as the button is re-drawn...

Is there a way to not update certain DOM elements inside a repeater such as a button?

<table>
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
    <tr ng-repeat="item in collection">
       <td>{{item.name}}</td>
        <td>
            <button ng-click="doSomething(item)"></button>
        </td>
    </tr>
</table>
Problem courtesy of: Thibs

Solution

Try using track by

<tr ng-repeat="item in collection track by item.$index">

Search for track by here: https://docs.angularjs.org/api/ng/directive/ngRepeat

Solution courtesy of: Rob

Discussion

Not sure if this will solve your problem, but if your collection items have a unique identifier, e.g item.id, then you can add the track by expression to your ng-repeat:

    <tr ng-repeat="item in collection track by item.id">

The effect of this is that angularjs does not re-render each row's html if you update the entire collection ($scope.collection = someUpdatedCollection), but tries to match the items of the old and the new collection by the track by expression, and updates only the parts changed. This also usually brings significant performance improvements of rendering HTML on collection updates.

Discussion courtesy of: srdan

This recipe can be found in it's original form on Stack Over Flow.