AngularJS: - Injecting Service into Directives (Link/Controller) using Dependency Injection

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

// $scope Dependency Injection (D.I.)
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World.'; /* Original Name Value */
});

app.service("myService",function(){
  this.name = " Injected Service into Directives";
});

// Injecting Factory/Service into Directives using D.I.
app.directive('changeIt',["myService",function(myService){
  // Changes $scope.name in MainCtrl
  return {
    restrict : 'C',
    controller: function($scope, $element, $attrs){
      $scope.name = myService.name + " - Ctrl ";
    },
    link : function(scope,element,attrs){
      scope.name =  myService.name + " - Link";
    }
  };
}]);

<!DOCTYPE html>
<html ng-app="angularjs-injection">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <h1>Hey! {{name}}</h1>
    <div class="changeIt"></div>
  </body>

</html>

/* Put your css in here */