ngRepeat:dupes error when iterating over duplicate keys in AngularJS

Answer the exact question first

What is the minimal track by expression that reliably eliminates the ngRepeat:dupes error for collections containing duplicate values?

The simplest expression that guarantees a unique key for every iteration is track by $index. AngularJS uses the array index as the tracking key, so even if the item value is duplicated, the key will differ for each DOM node.

Under what circumstances does using $index as the tracking key introduce rendering inconsistencies, and how can these be mitigated?

• Reordering or splicing the array: If items move, the DOM nodes keep their old indices, causing items to appear in the wrong position or animations to misbehave.
• Insertions or deletions at arbitrary positions: The indices of subsequent items shift, so Angular may reuse a node that now represents a different item.
• Animations (ngAnimate, CSS transitions): Animations rely on stable identities; changing the key can trigger unwanted enter/leave cycles.

Mitigation strategies:

• Prefer a naturally unique property: track by item.id if id exists.
• Generate a stable unique identifier when the data is fetched (e.g., UUID or incremental counter) and store it on each object.
• If you must use $index, avoid mutating the array in place; instead replace the whole array in a single $apply or $digest cycle.

How does the suppression of ngRepeat:dupes warnings in production affect debugging and performance profiling?

• In production mode AngularJS disables the duplicate‑key check to reduce overhead. The error is not logged, so developers may miss the root cause of rendering bugs.
• Because the check is omitted, there is a negligible performance impact—no extra hash map is built for duplicate detection.
• Debugging becomes harder: you need to enable ng-app="myApp" ng-strict-di="true" or run the app in development mode to see the warning.

Verification steps for this specific case

1. Open the browser console while the page is running in development mode.
2. Render the list with duplicate values and confirm the ngRepeat:dupes message disappears after adding track by $index.
3. Inspect the generated DOM nodes: each ng-repeat element should have a unique data-ng-repeat-track attribute reflecting the index.
4. If using a custom unique id, log console.log(item.id) before the ng-repeat to confirm uniqueness.

Do your items already expose a stable unique property (e.g., id, uuid)? If so, consider switching to track by item.id for more predictable rendering.