Exclude div from Angular Digest

Question

I have a div with a chart created outside of Angular. However, the div is inside ng-repeat, and when the update area is updated, the chart is cleared. Is there a way to prevent it from going through a div with a chart?

Here is my HTML:

<div ng-repeat="object in objects"> <span>{{ object.title }}</span> <div class="chart"></div> <!-- This is being cleared when object changes --> </div> 

I have studied using bindonce , but my data is changing, so I cannot (?) Use this.

To be clear, all I change is an attribute of type object.title . I do not expect the chart to stick if the entire array of objects were replaced.

EDIT

Wrote JSBin with the problem here: http://jsbin.com/jijalugu/1/edit?html,js,output

This seems to be the filter that is causing the problem. I use a filter to split objects into sections (from this answer ). Not sure why, it works correctly without a filter.

Answer 1

You can use a tracking expression:

 <div ng-repeat="rows in items | partition:2 track by $index" class="row"> <div ng-repeat="item in rows"> <b>{{ item.title }}</b> <div id="chart-{{item.title}}" class="chart"></div> </div> </div> 

Ben Nadel has an excellent blog post explaining tracking expressions and their benefits:

This function allows you to associate a JavaScript object with an ngRepeat DOM (Document Object Model) node using a unique identifier. Thanks to this association, AngularJS will not destroy and recreate DOM nodes unnecessarily. This can have tremendous performance and user friendliness.