Angular Modal

angular.modal.js

/**
*
*
* Angular Modal Service
*
* Requiere Bootstrap's modal (http://getbootstrap.com/javascript/#modals)
*
* Example:
*    
*     //1) Confirmation Modal
*     ConfirmationModal.open('Confirm deletion', 'Are you sure?', function(){
*             //Do delete...
* 
*             //Close modal
*             ConfirmationModal.close()
*         }, 
*     );
*     
*     //2) Information Modal
*     InformationModal.open('Title', 'Message');
*
*/
var modal = angular.module('Modal',[]);
 
modal.service('DialogService', function($compile, $http, $rootScope, $templateCache, $cacheFactory) {
    this.open = function(options) {
        $templateCache.put('standardModal.html', 
        '<div class="modal fade" id="dialogModal" tabindex="-1" role="dialog" aria-labelledby="dialogModalLabel" aria-hidden="true">'+
          '<div class="modal-dialog">'+
            '<div class="modal-content">'+
              '<div class="modal-header">'+
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'+
                '<h4 class="modal-title" id="dialogModalLabel">{{title}}</h4>'+
              '</div>'+
              '<div class="modal-body">'+
                '{{content}}'+
              '</div>'+
              '<div class="modal-footer">'+                  
                  '<button ng-repeat="options in customButtons" type="button" class="{{options.styleClasses}}" ng-click="options.callback()">{{options.name}}</button>'+
                  '<button ng-show="showButtonClose" type="button"  data-dismiss="modal">Close</button>'+
              '</div>'+
            '</div><!-- /.modal-content -->'+
          '</div><!-- /.modal-dialog -->'+
        '</div><!-- /.modal -->');
 
        var template = $templateCache.get('standardModal.html');
 
        var childScope = $rootScope.$new();
 
        childScope.title = options.title;
        childScope.content = options.content;
        childScope.customButtons = options.customButtons;
        childScope.showButtonClose = options.showButtonClose;        
 
        $('body').append($compile(template)(childScope));
        $('#dialogModal').modal();
 
        $('#dialogModal').on('hidden.bs.modal', function (e) {
            childScope.$destroy();
            $('#dialogModal').remove();
        })      
    };    
    this.close = function() {        
        $('#dialogModal').modal('hide')
    }
});
 
/* Useful Modals*/
modal.service('ConfirmationModal', function(DialogService) {
    this.open = function(title, content, acceptCallback, declineCallback) {
        DialogService.open({            
            title: title,
            content: content, 
            customButtons: {                      
                Yes: {
                    name: "Yes",
                    callback: acceptCallback,
                    styleClasses: 'btn btn-success'
                },
                No: {
                    name: "No",
                    callback: declineCallback,
                    styleClasses: 'btn btn-danger'
                }                
            },
            showButtonClose: false
        });
    };
    this.close = function(){
        DialogService.close();
    }
});

modal.service('InformationModal', function(DialogService) {
    this.open = function(title, content) {
        DialogService.open({            
            title: title,
            content: content, 
            showButtonClose: true
        });
    }
 });
 
//Add more here...