Buduję dyrektywę AngularJS. Chcę, aby ta dyrektywa zawijała inne treści, które mają w sobie kliknięcie. Powstały przycisk nic nie robi po kliknięciu. Oto uproszczona wersja kodu, którą próbowałem:

(HTML)

<div ng-app="someapp">
    <div ng-controller="Ctrl1">
        <h2>Example</h2>
        <my-dir data-x="1">
            <button ng-click="refresh()" id="refresh1">Refresh</button>
        </my-dir>
        <my-dir data-x="2">
            <button ng-click="refresh()" id="refresh2">Refresh</button>
        </my-dir>
    </div>
</div>

(JavaScript)

var app = angular.module('someapp', []);

app.controller('Ctrl1', function($scope){ });

app.directive('myDir', function(){
    return {
        restrict: 'E',
        scope: {},
        template: '<div><p>Directive contents:</p><div ng-transclude></div></div>',
        transclude: true,
        link: function(scope, element, attrs){
            $scope.y = attrs.x+1;
            scope.refresh = function(){
                console.log("Refresh Called, y = ", $scope.y);
            }
        }
    };
});

Jak mogę to zmienić, aby przycisk faktycznie uruchamiał funkcję $ scope.refresh ()?

Dodatkowe wyjaśnienia:

Potrzebuję lokalnych informacji o obiekcie dla dyrektywy (w pojedynczym kontrolerze może być wiele tej dyrektywy), więc tworzę nowy zakres.