Run Directive after DOM has rendered

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

by kiokotzu

HTML

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<!doctype html>
<html lang="en" ng-app="myApp">
    
    <head>
        <meta charset="utf-8" />
        <title>My AngularJS App</title>
    </head>
    
    <body ng-controller="stageController">
        <div repeat-hello-world="{{repeat}}"></div>
    </body>

</html>

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);
            */
        }
    }
}]);