Edit in JSFiddle

angular.module('demo', []).controller('ctrl' ,function ($scope){
    $scope.showPrompt1 = false;
    $scope.showPrompt2 = false;
    $scope.text = [];
    
    $scope.confirmTitle = '';
    $scope.cancelText = null;
    $scope.okText = null;
    
    $scope.btn2Cancel = function(){
        $scope.text.push("btn 2 cancel");
    }
    
    $scope.btn2OK = function(){
        $scope.text.push("btn 2 ok");
    }
    
    $scope.btn1Func = function btn1Func(){
        $scope.confirmTitle = 'BUTTON 1';
        $scope.detail = 'You clicked button 1';
        $scope.cancelText = null;
        $scope.okText = null;
        
        $scope.btn1OK = function(){ 
            $scope.text.push("btn 1 ok");
        };
        $scope.btn1Cancel = function(){ 
            $scope.text.push("btn 1 cancel");
        };
        $scope.showPrompt1 = true;
    };
    
    $scope.btn2Func = function btn2Func(){
        $scope.showPrompt2 = true;
    };
    $scope.btn3Func = function btn3Func(){
        $scope.confirmTitle = 'BUTTON 3';
        $scope.detail = 'You clicked button 1 alternate';        
        $scope.cancelText = "FOO";
        $scope.okText = "BAR";
        
        $scope.btn1OK = function(){ 
            $scope.text.push("btn 3 ok");
        };
        $scope.btn1Cancel = function(){ 
            $scope.text.push("btn 3 cancel");
        };
        $scope.showPrompt1 = true;
    };
    
    $scope.btn1OK= null;
    $scope.btn1Cancel= null;
    
}).directive('confirm', function(){
    var template ="<div class='confirm' ng-hide='!showPrompt'>" + 
        "<div class='confirmContainer'>" + 
            "<div class='confirm-title'>{{confirmTitle}}</div>" + 
            "<div class='confirm-detail'>{{detailText}}</div>" + 
            "<div class='confirm-actions'>"+
                "<button class='ok' btn' ng-click='ok()'>{{okText || 'OK'}}</button>"+
                "<button class='cancel btn' ng-click='cancel()'>{{cancelText || 'Cancel'}}</button>" + 
            "</div>" + 
        "</div></div>";
    
    function link(scope){
        scope.cancel = function cancelFunc(){
            scope.showPrompt = false;
            scope.cancelFunction();
        };
        
        scope.ok = function okFunc(){
            scope.showPrompt = false;
            scope.okFunction();
        };
    }
    
    
    return {
        template: template,
        link:link,
        scope:{
            confirmTitle: '=',
            detailText: '=',
            cancelText: '=',
            okText: '=',
            okFunction: '&',
            cancelFunction: '&',
            showPrompt: '='
        },
        restrict : "E"
    };
});

<div ng-controller='ctrl'>
    <button ng-click='btn1Func()'>Show Prompt1</button>
    <button ng-click='btn2Func()'>Show Prompt2</button>
    <button ng-click='btn3Func()'>Show Prompt1 Alternate</button>
    <confirm show-prompt='showPrompt1' confirm-title='confirmTitle' detail-text='detail' 
        cancel-text='cancelText' ok-text='okText'
        ok-function='btn1OK()' cancel-function='btn1Cancel()'></confirm>
    <confirm show-prompt='showPrompt2' confirm-title='"Static Title"'  detail-text='"static detail text"'
        cancel-text='"QUIT"' ok-text='"CONFIRM"' ok-function='btn2OK()' cancel-function='btn2Cancel()' ></confirm>
    <div ng-repeat='line in text track by $index'>{{line}}</div>
</div>

.confirm{
    height:100%;
    width:100%;
    position: fixed;
    top:0;
    opacity: 1;
    left:0;
    background-color: rgba(3, 3, 3, .25);
    z-index: 1000;
}

.confirm .confirmContainer{
    position: relative;
    top:50%;
    width:50%;
    margin: 0 auto;
    height:200px;
    margin-top: -50px;
    background-color: rgba(255, 255, 255, 1);
}

.confirm .confirm-actions{
    position: absolute;
    bottom:10px;
    right:10px;
}