Confirm Modal /AngularJs Directive

JS

(function () {
    'use strict';

    angular
        .module('app')
        .directive('ngConfirmClick', ['$modal', "$translate",
    function ($modal, $translate) {

        var ModalInstanceCtrl = function ($scope, $modalInstance) {
            $scope.ok = function () {
                $modalInstance.close();
            };

            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        };

        return {
            restrict: 'A',
            scope: {
                ngConfirmClick: "&",
                item: "="
            },
            link: function (scope, element, attrs) {
                element.bind('click', function () {
                    var message = $translate.instant(attrs.ngConfirmMessage) || "Are you sure ?";
                    var Type = attrs.ngConfirmType || "warning";
                    var title = $translate.instant(attrs.ngConfirmTitle) || "";
                    var ShowConfirm = attrs.ngConfirm || true;
                    var ConfirmText = $translate.instant(attrs.ngConfirmText) || "CONFIRM";
                    var ConfirmCanceltext = $translate.instant(attrs.ngConfirmCanceltext) || "CANCEL";

                    var windowClass = "";
                    /*
                    //This works
                    if (message && confirm(message)) {
                      scope.$apply(attrs.ngConfirmClick);
                    }
                    //*/

                    //*This doesn't works
                    var icon = 'fa fa-warning';
                    switch (Type) {
                        case "warning":
                            icon = 'fa fa-warning';
                            windowClass = 'modal-message modal-warning';
                            break;
                        case "danger":
                            icon = 'glyphicon glyphicon-fire';
                            windowClass = 'modal-message modal-danger';
                            break;
                        case "info":
                            icon = 'fa fa-envelope';
                            windowClass = "modal-message modal-info";
                            break;
                        case "success":
                            icon = 'glyphicon glyphicon-check';
                            windowClass = "modal-message modal-success";
                            break;

                    }

                    var modalHeader = "<div class='modal-header'><i class='" + icon + "'></i></div>" + (title != "" ? "<div class='modal-title'>" + title + "</div>" : "")
                    var modalHtml = '<div class="modal-body">' + message + '</div>';
                    var modalfooter = '<div class="modal-footer">' + (ShowConfirm ? '<button class="btn btn-primary" ng-click="ok()">' + $translate.instant(ConfirmText) + '</button>' : "") + "<button class='btn btn-warning' ng-click='cancel()'>" + $translate.instant(ConfirmCanceltext) + "</button></div>";

                    var modalInstance = $modal.open({
                        windowClass: windowClass,
                        template: modalHeader + modalHtml + modalfooter,
                        controller: ModalInstanceCtrl
                    });

                    modalInstance.result.then(function () {
                        scope.ngConfirmClick({ item: scope.item }); //raise an error : $digest already in progress
                    }, function () {
                        //Modal dismissed
                    });
                    //*/

                });

            }
        }
    }
        ]);
})();




HTML

<button class="btn btn-danger"
                            ng-if="currentAbsence != null"
                            ng-confirm-message="CONFIRM_DELETE_MESSAGE" ng-confirm-title="TITLE" ng-confirm-click="delete()">
                        <i class="fa fa-trash"></i>
                        {{'DELETE' | translate}}
                    </button>