title: set directive element attributes through parent controller AngularJS
body: <p>I want to configure my directive module through my app level controllers. <strong><a href="http://plnkr.co/edit/lqWvK2zO2r9OfCKHoiph" rel="nofollow">Plunker</a></strong></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div ng-controller="App"&gt;
    &lt;foodz index="index"&gt;&lt;/foodz&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('app', ['foodz']).
    controller('App', ['$scope',function($scope){
      $scope.index = 1;
    }]);
  </code></pre>
  
  <p><strong>foodz.js</strong></p>
  
  <pre><code>angular.module('foodz', []).
    controller('foodzController', ['$scope',function($scope){
  
      //Data is coming in through external API
      $scope.$on('foodzFetched', function(e,d) {
        $scope.foodz = d;
      });
  
      //Lets say data to looks like:
      //[{"name":"banana"},{"name":"smoothy"}]
    }]).
    directive('foodz', function() {
      return {
        restrict: 'E',
        scope:{
          index: '@'
        },
        replace: true,
        controller: 'foodzController',
        templateUrl: 'foodzTemplate.html',
        link: function(scope, controller) {}
      };
  });
  </code></pre>
  
  <p><strong>foodzTemplate.html</strong></p>
  
  <pre><code>&lt;div ng-controller="foodzController"&gt;
    &lt;span&gt;
      {{foodz[index].name}}
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So in this example, I am trying to pass the <code>index</code> through my <code>app</code> level controller into an attribute of my directive element which also has its own controller.</p>
  
  <p>What am I doing wrong here?</p>