javascript - Passing local variable to directive in AngularJs -

i have controller feed repeater array:

demo.controller('mycntl', function ($scope, $compile) {      $scope.items = [         { name: 'diego' },         { name: 'darko' }     ];             $scope.load = function (obj) {                     $('body').append($compile("<panel data='obj'  />")($scope));     }  });  <div ng-controller='mycntl'>         <p ng-repeat='item in items'>         <button ng-click='load(item)'>load {{item.name}}</button>     </p>        </div> 

and can see, repeated item has button load further data. when button clicked calls load(obj) function, append page directive:

demo.directive('panel', function () {     return {         restrict: 'e',         scope: {             data: '@'         },         template: '<pre>i\'m panel called {{data.name}}</pre>',         controller: function ($scope, $element, $attrs) {          }                 } }); 

the problem can't understand how pass local variable obj directive. know set variable $scope of controller , read directive, kinda defeat.

fiddle: http://jsfiddle.net/darkoromanov/cngd9/

maybe can create new scope put local variables in.
in case have make 2 changes:

1) if use '@' in directive can pass string, if want pass object use '='.

scope: {       data: '='   },   

2) in controller create new scope

var newscope = $scope.$new();   newscope.obj = obj;   $('body').append($compile("<panel data='obj'  />")(newscope));