Ng-Repeat showing irregular behavior with one time

Question

This question already has an answer here:

• When not to use 'track by $index' in an AngularJS ng-repeat? 2 answers

I am having a ng-repeat directive that is running on the array on object. I am facing a specific scenario in which, When I Bind my object properties with one time binding they are now getting refreshed when I Purge and add the data in my Array Of Object on which I am running my ng-repeat.

The point to focus here is, All these functionalities were working previosuly.

CODE

<div class="search_result" data-ng-repeat="prod in searchResult track by $index" ng-show="ShowWhenResultPositive">
    <div class="media search-result-container">
        <div class="media-left">
            <div class="left ">&nbsp;</div>
            <div class="leftBottom">&nbsp;</div>
            <div class="rightTop">&nbsp;</div>
            <div class="rightBottom">&nbsp;</div>
            <div class="searchimg_container" ng-click="redirectionToPage(prod.url)">
                <!--<img src="{{prod.tkh_imageurl}}"  alt="Not Available" class="lazyload"/>-->
                <picture>
                    <source data-srcset="{{prod.desktopImage}}" media="(min-width: 768px)">
                    <source data-srcset="{{prod.mobileImage}}" media="(min-width: 320px)">
                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="${properties.placeholderimage}" alt="Not Available" class="lazyload"><!--${properties.placeholderimage}-->
                </picture>
            </div>
        </div>
        <div class="media-body search-desc">
            <p ng-if="isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.title}}</p>
            <p ng-if="!isPDF" class="subheading" ng-click="redirectionToPage(prod.url)">{{::prod.tkh_title}}</p>
            <p ng-if="!isPDF" class="resultdesc">{{::prod.tkh_description}}</p>
        </div>
    </div>
</div>

Here is the code for the same.

Answer 1

From the Docs:

Avoid using track by $index when the repeated template contains one-time bindings. In such cases, the nth DOM element will always be matched with the nth item of the array, so the bindings on that element will not be updated even when the corresponding item changes, essentially causing the view to get out-of-sync with the underlying data.

— AngularJS ng-repeat API Reference

If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.