Simple wrapper for modal dialog $uibModal

modal-dialog.service.js

araritApp.controller('modalDialogController', ['$scope','$state', '$uibModal', '$uibModalInstance', 'titleValue', 'textValue', 'buttons', 
    function ($scope, $state, $uibModal, $uibModalInstance, titleValue, textValue, buttons) {
        $scope.title = titleValue;
        $scope.text = textValue;
        $scope.buttons = buttons;

        $scope.btnClicked = function (callback) {
            $uibModalInstance.close();
            callback();
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
            if ($scope.buttons.cancelButton) {
                $scope.buttons.cancelButton.callbackFunction();
            }
        };

    }]);

araritApp.service('ModalDialogService', ['$uibModal', '$templateCache','$state',
    function ($uibModal, $templateCache,$state) {
        /*
         *   send Alert with buttons:
         format:
         [{buttonText, callbackFunction, buttonStyle},...]
         example:
         buttons = {
         buttonSet: [{
         buttonText: "OK",
         callbackFunction: function () {
         console.info("OK clicked")
         },
         buttonStyle: "btn-primary"
         }],
         cancelButton: {
         buttonText: "Cancel",
         callbackFunction: function () {
         console.info("Cancel clicked")
         },
         buttonStyle: "btn-primary"
         }
         }
         */
        this.alert = function (title, text, buttons) {
            if (!buttons) {
                buttons = {
                    buttonSet: [{
                        buttonText: "OK",
                        callbackFunction: function () {
                            console.info("OK clicked")
                        },
                        buttonStyle: "submit-button"
                    }]
                }
            }
			 
	$uibModal.open({
	template: $templateCache.get('modal-dialog.view.html'),
	controller: 'modalDialogController',
	resolve: {
		titleValue: function () {
			return title;
		},
		textValue: function () {
			return text;
		},
		buttons: function () {
			return buttons;
		}
                },
            backdrop: 'static', /*  this prevent user interaction with the background  */
            keyboard: false
            });
        };

        this.confirmationAlert = function (title, text, onOK, onCancel) {
            var modalWindow = {
                buttonSet: [{
                    buttonText: "OK",
                    callbackFunction: onOK,
                    buttonStyle: "modal-contect-appealInterface submit-button"
                }],
                cancelButton: {
                    buttonText: "Cancel",
                    callbackFunction: onCancel,
                    buttonStyle: "modal-contect-appealInterface submit-button"
                }
            };
            this.alert(title, text, modalWindow);
        };
    }]);

modal-dialog.view.html

<div name="modalWindow" class="modal-content">
    <div class="modal-header">
        <button type="button" class="closeNotElement" data-dismiss="modal" aria-hidden="true"
                ng-click="cancel()">&times;</button>
        <h4 class="modal-title" id="myModalLabel">{{title }}</h4>
    </div>
    <div class="modal-body">
        {{ text }}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" ng-class="buttons.cancelButton.buttonStyle" data-dismiss="modal"
                ng-show="buttons.cancelButton" ng-click="cancel()">{{buttons.cancelButton.buttonText}}
        </button>
        <button ng-repeat="btn in buttons.buttonSet" type="button" class="btn" ng-class="btn.buttonStyle"
                data-dismiss="modal" ng-click="btnClicked(btn.callbackFunction)">{{btn.buttonText }}
        </button>
    </div>
</div>

otherFile.js

      /////Now we can Test them by calling the TestModal methods from the scope  
       
       $scope.testModal1 = function () {

            var onOK = function(){
              alert('OK!');
            };

            var onCancel = function(){
                alert('Cancel!');
            };
            ModalDialogService.confirmationAlert('title', 'modal window content', onOK, onCancel);
        };

        $scope.testModal2 = function () {
            var modalMultiButtonExample = {
                buttonSet: [{
                    buttonText: "Yes",
                    callbackFunction: function () {
                        alert('YES!');
                    },
                    buttonStyle: "btn-primary"
                },
                    {
                        buttonText: "No",
                        callbackFunction: function () {
                            alert('NO!');
                        },
                        buttonStyle: "btn-info"
                    }
                ],
                cancelButton: {
                    buttonText: "Cancel",
                    callbackFunction: function () {
                        alert('cancel')
                    },
                    buttonStyle: "btn-default"
                }
            };

            ModalDialogService.alert('Title', ' Modal Window Content ', modalMultiButtonExample);
        };