AngularJS modal window directive

I'm trying to make a directive angularJS directive for Twitter Bootstrap Modal. ``` 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: '&' } }; });​ ``` Here is JsFiddle example http://jsfiddle.net/okolobaxa/unyh4/15/ But handler() function runs as many times as directives on page. Why? What is the right way?