AngularJS模态窗口指令

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

demoApp.controller('DialogDemoCtrl',function AutocompleteDemoCtrl($scope) {
    $scope.Langs = [
        {Id:"1",Name:"ActionScript"},{Id:"2",Name:"AppleScript"},{Id:"3",Name:"Asp"},{Id:"4",Name:"BASIC"},{Id:"5",Name:"C"},{Id:"6",Name:"C++"}
    ];

    $scope.confirm = function (id) {
        console.log(id);
        var item = $scope.Langs.filter(function (item) { return item.Id == id })[0];
        var index = $scope.Langs.indexOf(item);
        $scope.Langs.splice(index,1);
    };
});

demoApp.directive('modal',function ($compile,$timeout) {
    var modalTemplate = angular.element("<div id='{{modalId}}' class='modal' style='display:none'  tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-header'><h3 id='myModalLabel'>{{modalHeaderText}}</h3></div><div class='modal-body'><p>{{modalBodyText}}</p></div><div class='modal-footer'><a class='{{cancelButtonClass}}' data-dismiss='modal' aria-hidden='true'>{{cancelButtonText}}</a><a ng-click='handler()' class='{{confirmButtonClas}}'>{{confirmButtonText}}</a></div></div>");
    var linkTemplate = "<a href='#{{modalId}}' id= role='button' data-toggle='modal' class='btn small_link_button'>{{linkTitle}}</a>"

    var linker = function (scope,element,attrs) {
        scope.confirmButtonText = attrs.confirmButtonText;
        scope.cancelButtonText = attrs.cancelButtonText;
        scope.modalHeaderText = attrs.modalHeaderText;
        scope.modalBodyText = attrs.modalBodyText;
        scope.confirmButtonClass = attrs.confirmButtonClass;
        scope.cancelButtonClass = attrs.cancelButtonClass;
        scope.modalId = attrs.modalId;
        scope.linkTitle = attrs.linkTitle;

        $compile(element.contents())(scope);
        var newTemplate = $compile(modalTemplate)(scope);

        $(newTemplate).appendTo('body');

        $("#" + scope.modalId).modal({
            backdrop: false,show: false
        });
    }

    var controller = function ($scope) {
        $scope.handler = function () {
            $timeout(function () {
                $("#"+ $scope.modalId).modal('hide');        
                $scope.confirm();            
            });
        }
    }

    return {
        restrict: "E",rep1ace: true,link: linker,controller: controller,template: linkTemplate
        scope: {
            confirm: '&'
        }
    };
});?

这是JsFiddle示例http://jsfiddle.net/okolobaxa/unyh4/15/

但是handler()函数与页面上的指令一样多次运行.为什么？什么是正确的方法？