AngularJS: How to call function on last iteration of ng-repeat? - angularjs

Question

I am trying to figure out how to call a function on the last iteration of an ng-repeat? I am using nested ng-repeats to display results in table format and would like to call a function after all the table cells are loaded.
I was trying to do something like this:
<tr ng-repeat="(rowIndex, rowResults) in chunkedResults">
<td ng-repeat="result in rowResults">
<canvas id="item{{rowIndex}}{{$index}}"></canvas>
<div>Canvas{{rowIndex}}{$index}}</div>
</td>
<div ng-if="$last" ng-init="loadCanvases()"></div>
</tr>
But with nested ng-repeats this does not seem to work. When there is only one ng-repeat present like so:
<tr>
<td ng-repeat="result in rowResults">
<canvas id="item{{$index}}"></canvas>
<div>Canvas{$index}}</div>
<div ng-if="$last" ng-init="loadCanvases()"></div>
</td>
</tr>
Then the function gets called on the last iteration as it should.
Any ideas why?

Answer 1

Add condition in your ng-init
<td ng-repeat="result in rowResults">
<canvas id="item{{$index}}"></canvas>
<div>Canvas{{$index}}</div>
<div ng-if="$last" ng-init="$last?loadCanvases():null"></div>
</td>

Answer 2

You can create a directive and place it in your "last" div :
<td ng-repeat="result in rowResults">
<canvas id="item{{$index}}"></canvas>
<div>Canvas{{$index}}</div>
<div ng-if="$last" data-onlast></div>
</td>
and then execute your own logic in your custom "onlast" directive.
(ng-init is only supposed to be used at the same level as ng-repeat, though you could make it work)

Answer 3

You're probably not approaching your problem the right way.
If you want to execute code once the DOM contains all the list elements (for instance you want to get the pixel height of your element), you can simply do it after a $timeout. This will ensure the previous angular digestion is done and everything is on place in the DOM.
$timeout(function() {
// Here execute anything you want after the list is loaded
});