Directive: compile vs link

AngularJS

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<body ng-app="app">
    <div compile link>Hello, World</div>
</body>

JavaScript

var app = angular.module('app', []);

app.directive('compile', function () {
    return {
        restrict: 'A',
        compile: function (el, attrs) {
        console.log("el :", el);
        console.log("attrs :", attrs);
            el.append('<br/>Compilation phase');
        }
    };
});

app.directive('link', function () {
    return {
        restrict: 'A',
        link: function (scope, el, attrs) {
            console.log(el);
            el.append('<br/>Link phase');
        }
    };
});