d3.js - AngularJS: None scope functions in a directive seem not to be isolated -

i have problem multiple instances of same directive on same page in jsfiddle example. each directive has own sort button , draws small bar chart d3. , button should sort corresponding directive. use directive show multiple barcharts on same page, different data sets.

the problem sort button sorts last directive (no matter how many there) , uses data of scope. other charts stay same. scope seems isolated data not function. think missed scopes have no idea why behaviour this. hints?

this return of directive looks like:

return {             restrict : "e",             transclude: true,             scope : {                 "data" : "="             },             template : "<div><button ng-click='func()'>sort</button></div>",             link: function (scope, element, attrs)             {                 init(element, scope);                scope.func = function()               {                 scope.data = scope.data.sort(function(a, b){return a-b});                 render(scope);               }             }         } 

the controller provides data. function func() sorts data. think problem around render() function defined in directive , not in link: expression. not sure.