How to Know when your angular rendering is complete (Callback function for ngrepeat/ng-repeat)

There are scenarios when you need to know that angular rendering is complete due to ng-repeat directive. Here we need to understand that the success call back method of $http does not mean your rows are rendered. following is the scenario where we can utilize this ng-repeat callback method,
1- You may need to perform particular Jquery Method after rendering of rows is complete.
2- Format generated rows after they are rendered.
3- I needed this to use data tables object ( $('#tbl').DataTable();) after rendering is complete.

To start with, we need to write an attribute level directive which we can call like,



 <tr ng-repeat="row in Data" repeat-end="OnRepeatEnd()">

I hope you understand from above line that our directive name would be "repeatEnd" because we used attribute "repeat-end". The callback method name is "OnRepeatEnd" in our example. We need to define this method in our controller. Please look at following example with different callback function name.


Note: Following code is forked from http://jsfiddle.net/jwcarroll/ZFp3a/.



The next step is the definition of Directive,
1- We have restricted directive to just attribute.
2- Angular documentation for ngrepeat  shows different variables used e.g. $last, $index, $fist etc. We require $last variable here to see what is our last index row and then evaluate the callback method.
3- To make sure everything is done, you can wait for 1 or less than 1 seconds.