title: Injecting services into AngularJS directive controller directly
body: <p>I understand how Angular dependency injection works with directives but wanted clarification on something. I have a dummy test directive as follows:</p>
  
  <pre><code>app.directive("test", [
  
    function() {
  
      return {
        restrict: "E",
        scope: {},
        controller: ["$scope", "$filter",
          function($scope, $filter) {
            var food = ["Apple pie", "Apple cobler", "Banana Split", "Cherry Pie", "Applesauce"];
  
            $scope.favorites = $filter('filter')(food, "Apple");
          }
        ],
        template: "&lt;div&gt;{{favorites}}&lt;/div&gt;"
      }
    }
  ]);
  </code></pre>
  
  <p>This works fine and will filter the <code>food</code> array as expected. However I noticed if I inject the <code>$filter</code> service in the directive as follows, it still works:</p>
  
  <pre><code>app.directive("test", ["$filter",
  
    function($filter) {
  
      return {
        restrict: "E",
        scope: {},
        controller: ["$scope",function($scope) {...
  </code></pre>
  
  <p>My question: Is it better practice to inject services into a directive in the declaration line like so: </p>
  
  <p><code>app.directive("test", ["$filter", function($filter) {</code> </p>
  
  <p>or in the controller line like this: </p>
  
  <p><code>controller: ["$scope", "$filter", function($scope, $filter) {</code>? </p>
  
  <p>Is there no difference? Here is a <a href="http://plnkr.co/edit/6aa0fFbEmkPXNeGwa6AC?p=preview" rel="noreferrer">Plunker</a> of the directive code.</p>