title: injecting service into directive returns undefined
body: <p>I am injecting a serivce into a directive and for some instance this service returns undefined can anyone explain what I am doing wrong?</p>
  
  <p>Here is a plunker of the code below. <a href="https://plnkr.co/edit/H2x2z8ZW083NndFhiBvF?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/H2x2z8ZW083NndFhiBvF?p=preview</a></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.players = ["A","B","C"];
  });
  
  app.factory('PlayerListS', [function() {
      var playerList = [];
  
      function getList() {
          return playerList;
      }
      function addToList(name) {
          playerList.push(name);
      }
  
      return {
          addToList :addToList,
          getList: getList
      }
  
  }]);
  app.directive("player",['PlayerListS', function (PlayerListS) {
  return {
      restrict: 'E',
      scope: {
          person:'@person',
          add:'&amp;add'
      },
      replace: false,
      templateUrl: "player.html",
      controller: function($scope, $element, $compile) {
            $scope.add = function(name) {
                PlayerListS.addToList(name);
                console.log(PlayListS.getList());
            }
      }
  };
  }]);
  </code></pre>