How do you execute directive code after rendering?

Question

I'm trying to build a directive that runs after a nested ng-repeat has completed rendering. Here's what I've tried (fiddle):

The HTML:

<div ng-app="MyApp" ng-controller="MyCtrl">
    <ul my-directive>
        <li ng-repeat="animal in animals">{{animal}}</li>
    </ul>
</div>

And the JavaScript:

angular.module("MyApp", [])
    .directive("myDirective", function () {
        return function(scope, element, attrs) {
            alert(element.find("li").length); // 0
        };
    });

function MyCtrl($scope) {
    $scope.animals = ["Dog", "Cat", "Elephant"];
}

The linking function in my custom directive runs before all of the <li> elements have been rendered (and 0 is alerted). How do I run code after the ng-repeat has completed rendering?

Answer 1

You could move the directive inside ng-repeat, http://jsfiddle.net/ZTMex/3/

<div ng-app="MyApp" ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="animal in animals" my-directive>{{animal}}</li>
    </ul>
</div>

Or have a look at https://stackoverflow.com/a/13472605/1986890 which is related to your question.