Run Directive after DOM has rendered

How can I run a directive after the DOM has finished rendering?

by Tarek Faham

HTML

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
    
    
    <body ng-app="myApp" ng-controller="stageController">
        <div repeat-hello-world="{{repeat}}"></div>
    </body>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> <style>

JavaScript

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.directives']);

/* Controllers */
function stageController($scope) {
    $scope.repeat = 5;
}

/* Directives */
angular.module('myApp.directives', [])
    .directive('repeatHelloWorld', ['$timeout', function (timer) {
    return {
        link: function (scope, elem, attrs, ctrl) {
            var hello = function () {
                console.info("Repeat number: " + attrs.repeatHelloWorld);
                for (var i = 0; i < attrs.repeatHelloWorld; i++) {
                    console.log("Hello world!");
                }
            }
            //hello();
            /* Doesn't Work! 
            * Try: */            
            timer(hello, 0);
            
        }
    }
}]);