Angular Modal component that displays as Foundation Modal.

angular-foundation-modal.js

'use strict';
angular.module('the.ui.modal',[])
.controller('confirmDialogCtrl',['$scope', 'header','msg',function($scope,header,msg){
	//-- Variables -----//

	$scope.header = header;
	$scope.msg = msg;

	//-- Methods -----//

	$scope.no = function(){
		$scope.modalInstance.dismiss('no');
	}; // end close
	$scope.yes = function(){
		$scope.modalInstance.close('yes');
	}; // end yes
}])

.provider('$modal', function () {
	var modalProvider = {
			options: {
		        size: 'tiny',
		        controller:'yourController',
		        templateUrl:'yourTemplateToShowInModal',
		        windowTemplateUrl: null,
		        resolve: {
					header : function() { return "Modal Box Title"; },
					msg : function() { return "Your Message or Question"; }
				}
		        
		    },
			$get : ['$rootScope', '$q', '$http', '$templateCache', '$controller', '$document', '$compile',  function ($rootScope, $q, $http, $templateCache, $controller, $document, $compile)
			{
				var $modal = {};
				var $injector = angular.injector(['ng']);
				
				var templatePromise = function  (options)
				{
					return $http.get(options.templateUrl, {cache: $templateCache}).then(function(result){return result.data;});
				}
				
				var resolvePromises = function (resolves) {
		            var promisesArr = [];
		            angular.forEach(resolves, function (value) {
		              if (angular.isFunction(value) || angular.isArray(value)) {
		                promisesArr.push($q.when($injector.invoke(value)));
		              }
		            });
		            return promisesArr;
		          }
				
				$modal.remove = function () {
					$('#ModalBox').foundation('reveal', 'close');
				}
				
				$modal.open = function (modalOptions)
				{
					var modalOpenedDeferred = $q.defer();
					var modalResultDeferred = $q.defer();
					
					var modalInstance = {
						result: modalResultDeferred.promise,
						opened: modalOpenedDeferred.promise,
						close: function (result) {
							modalResultDeferred.resolve(result);
							$modal.remove();
						},
						dismiss: function (reason) {
							modalResultDeferred.reject(reason);
							$modal.remove();
						}
					}
					
					modalOptions = angular.extend({}, modalProvider.options, modalOptions);
					modalOptions.resolve = modalOptions.resolve || {};
					
					var templateAndResolvePromise =
			              $q.all([templatePromise(modalOptions)].concat(resolvePromises(modalOptions.resolve)));
					
					templateAndResolvePromise.then(function resolvePromises(tplAndVars){
						
						var modalScope = (modalOptions.scope || $rootScope).$new();
						modalScope.modalInstance = modalInstance;
						var ctrlInstance, ctrlLocals = {};
						if (modalOptions.controller) {
							ctrlLocals.$scope = modalScope;
							ctrlLocals.$modalInstance = modalInstance;
							var resolveIndex = 1;
							angular.forEach(modalOptions.resolve, function (value, key) {
								ctrlLocals[key] = tplAndVars[resolveIndex++]
							});
							ctrlInstance = $controller(modalOptions.controller, ctrlLocals)
							if (modalOptions.controller) {
			                  modalScope[modalOptions.controllerAs] = ctrlInstance;
			                }
						}
						
						var body = $document.find('body').eq(0);

						var angularDomEl = angular.element('<div modal-box></div>');
						angularDomEl.attr({
							'template-url': modalOptions.windowTemplateUrl,
							'size': modalOptions.size
						})
						.html(tplAndVars[0]);
						
				        var modalDomEl = $compile(angularDomEl)(modalScope);
				        body.append(modalDomEl);
				        
					},
					function resolveError (reason) {
						modalResultDeferred.reject(reason);
					});
					
					templateAndResolvePromise.then(function () {
			              modalOpenedDeferred.resolve(true);
			            }, function () {
			              modalOpenedDeferred.reject(false);
			            });
					
					return modalInstance;
				}
				
				return $modal;
				
			}]
	}
	
	return modalProvider;
})
.directive('modalBox', ['$timeout', function ($timeout) {
    return {
      restrict: 'EA',
      replace: true,
      transclude: true,
      templateUrl: function(tElement, tAttrs) {
        return tAttrs.templateUrl || 'templates/modal-box.html';
      },
      link: function (scope, element, attrs) {
        scope.size = attrs.size;
        $timeout(function () {
        	$('#ModalBox').data('reveal-init', {
				animation: 'fadeAndPop',
				animation_speed: 250,
				close_on_background_click: true,
				close_on_esc: true,
				dismiss_modal_class: 'close-reveal-modal',
				bg_class: 'reveal-modal-bg',
				bg : $('.reveal-modal-bg'),
				css : {
					open : {
						'opacity': 0,
						'visibility': 'visible',
						'display' : 'block'
					},
					close : {
						'opacity': 1,
						'visibility': 'hidden',
						'display': 'none'
					}
				}
			});
			$('#ModalBox').foundation('reveal', 'open');
        });
        
        $(document).on('open.fndtn.reveal', '[data-reveal]', function () {
    	});

    	$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    	});

    	$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
    	});

    	$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
    		$('#ModalBox').remove();
    	});
        
    	scope.close = function (evt) {
    		scope.modalInstance.dismiss();
    		evt.preventDefault();
        };
      }
    };
  }]);

modal-box.html

<div id="ModalBox" class="reveal-modal tiny" data-reveal>
	<a class="close-reveal-modal" ng-click="close()">&#215;</a>
	<div class="modal-content" ng-transclude></div>
</div>

modal-confirm-temp.html

<div id="modal-form">
<div>
<i class="fa fa-exclamation-triangle" style="font-size: 30px; margin-right: 10px;"></i>{{msg}}

<div class="clearfix" style="margin-top: 10px;">
	<a href="javascript:void(0)" class="button tiny right alert" ng-click="no()" style="margin: 5px 5px;">No</a>
	<a href="javascript:void(0)" class="button tiny right success"  ng-click="yes()" style="margin: 5px 5px;">Yes</a>
</div>
</div>
</div>

sample-confirm.js

app.factory('Users', function ($rootScope, $http, toaster, $modal) {
	return {
		profile : function (inputs)
		{
			return $http.post('/the/users/profile', inputs, {
	            headers: {'Content-Type': 'application/json'}
	        });
		},
		
		search : function (inputs)
		{
			return $http({method: 'POST', url:'/the/users/search', data: inputs, headers: {'Content-Type': 'application/json'}});
		},
		
		remove : function (user)
		{
			var dlg = $modal.open({
				size: 'small', 
				controller: 'confirmDialogCtrl', 
				templateUrl: 'templates/modal-confirm-temp.html',
				resolve: {
					header : function() { return "Confirmation Deleting User"; },
					msg : function() { return "Are you sure to delete user?"; }
				}});
			
			dlg.result.then(function(btn){
				$http({method: 'DELETE', url:'/the/users/'+user.id})
				.success(function(data){
					toaster.pop(data.msg_type.toLowerCase(), "", data.msg);
					$rootScope.$broadcast('onDeleteUser', user);
				})
			},function(btn){
				//alert('You confirmed "No."');
			});
		},
		
		suspend : function (user)
		{
			var dlg = $modal.open({
				size: 'small', 
				controller: 'confirmDialogCtrl', 
				templateUrl: 'templates/modal-confirm-temp.html',
				resolve: {
					header : function() { return "Confirmation Suspending User"; },
					msg : function() { return "Are you sure to suspend user?"; }
				}});
			
			dlg.result.then(function(btn){
				$http({method: 'DELETE', url:'/the/users/suspend/'+user.id})
				.success(function(data){
					toaster.pop(data.msg_type.toLowerCase(), "", data.msg);
					$rootScope.$broadcast('onSuspendUser', user);
				})
			},function(btn){
				//alert('You confirmed "No."');
			});
		},
		
		activate : function (user)
		{
			var dlg = $modal.open({
				size: 'small', 
				controller: 'confirmDialogCtrl', 
				templateUrl: 'templates/modal-confirm-temp.html',
				resolve: {
					header : function() { return "Confirmation Activating User"; },
					msg : function() { return "Are you sure to activate user?"; }
				}});
			
			dlg.result.then(function(btn){
				$http({method: 'DELETE', url:'/the/users/activate/'+user.id})
				.success(function(data){
					toaster.pop(data.msg_type.toLowerCase(), "", data.msg);
					$rootScope.$broadcast('onActivateUser', user);
				})
			},function(btn){
				//alert('You confirmed "No."');
			});
		}
	};
});