Angularjs directives Difference between controller and link

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8" />
        <title>Difference between controller vs link. </title>
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
        <script>
                var myApp = angular.module('CtrlLinkApp', []);
                myApp.controller('CtrlLinkCtrl', function($scope) {
                        $scope.name = 'Anil, ';
                });

                myApp.directive('controllerVsLink', function() {
                        return {
                                restrict: 'E',
                                template: '<p>Hello controller vs. link :  {{name}}!</p>',
                                controller: function($scope, $element) {
                                        $scope.name = $scope.name + "Sunil, ";
                                },
                                link: function(scope, el, attr) {
                                        scope.name = scope.name + "Sushil ";
                                }
                        }
                });
        </script>
</head>

<body ng-app="CtrlLinkApp" ng-controller="CtrlLinkCtrl">
        <h1>
             Difference between controller vs. link
        </h1>
        <controller-vs-link></controller-vs-link>
</body>

</html>

/* Put your css in here */