AngularJS directive controller vs. link

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS directive controller vs. link</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script>
    var app = angular.module('linkApp', []);

    //This is controller section.
    app.controller('linkCtrl', ["$scope", function($scope) {
      $scope.count = 'One ';
    }]);

    //This is directive section.
    app.directive('linkDirective', function() {
      return {
        restrict: 'E',
        template: '<span>This is {{count}}!</span>',
        controller: function($scope, $element) {
          $scope.count = $scope.count + ", Two";
        },
        link: function(scope, el, attr) {
          scope.count = scope.count + ", Three";
        }
      }
    })
  </script>
</head>

<body ng-app="linkApp">
  <div ng-controller="linkCtrl">
    <h1>Angularjs difference between link and controller.</h1>
    <link-directive></link-directive>
  </div>
  <br>
  <a href="http://www.code-sample.com/">click for more detail.</a>
</body>

</html>

/* Put your css in here */