title: Passing local variable to directive in AngularJs
body: <p>I have a controller that feed a repeater with an array:</p>
  
  <pre><code>demo.controller('MyCntl', function ($scope, $compile) {
  
      $scope.items = [
          { name: 'Diego' },
          { name: 'Darko' }
      ];       
  
      $scope.load = function (obj) {            
          $('body').append($compile("&lt;panel data='obj'  /&gt;")($scope));
      }
  
  });
  
  &lt;div ng-controller='MyCntl'&gt;    
      &lt;p ng-repeat='item in items'&gt;
          &lt;button ng-click='load(item)'&gt;Load {{item.name}}&lt;/button&gt;
      &lt;/p&gt;       
  &lt;/div&gt;
  </code></pre>
  
  <p>and as you can see, the repeated item has a button to load further data. When button is clicked it calls the load(obj) function, that append to the page a directive:</p>
  
  <pre><code>demo.directive('panel', function () {
      return {
          restrict: 'E',
          scope: {
              data: '@'
          },
          template: '&lt;pre&gt;I\'m a panel called by {{data.name}}&lt;/pre&gt;',
          controller: function ($scope, $element, $attrs) {
  
          }            
      }
  });
  </code></pre>
  
  <p>The problem is that I can't understand how to pass the local variable <strong>obj</strong> to the directive. I know I could set the variable to the $scope of the controller and read it easily from the directive, but it would be kinda defeat.</p>
  
  <p><strong>Fiddle</strong>: <a href="http://jsfiddle.net/darkoromanov/cngd9/" rel="nofollow">http://jsfiddle.net/darkoromanov/cngd9/</a></p>