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

It depends on how your $('site-header') is constructed.

You can try to use $timeout with 0 delay. Something like:

return function(scope, element, attrs) {    $timeout(function(){        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );    });        }

Explanations how it works: one, two.

Don't forget to inject $timeout in your directive:

.directive('sticky', function($timeout)

Here is how I do it:

app.directive('example', function() {    return function(scope, element, attrs) {        angular.element(document).ready(function() {                //MANIPULATE THE DOM        });    };});

Probably the author won't need my answer anymore. Still, for sake of completeness i feel other users might find it useful. The best and most simple solution is to use $(window).load() inside the body of the returned function. (alternatively you can use document.ready. It really depends if you need all the images or not).

Using $timeout in my humble opinion is a very weak option and may fail in some cases.

Here is the complete code i'd use:

.directive('directiveExample', function(){   return {       restrict: 'A',       link: function($scope, $elem, attrs){           $(window).load(function() {               //...JS here...           });       }   }});