MaterializeCSS (v0.100.2) Modal Factory for AngularJS (1.6.6 Tested)

modal.factory.js

/*USAGE: YOU CAN OPEN A MODAL FROM A CONTROLLER
(function(){
  angular
  .module("myModule")
  .controller("myController", myController)
  
  myController.$inject = ["Modal", "$scope"];
  
  function myController(Modal, $scope){
    var vm = this;
    
    vm.showModal = showModal;
    
    function showModal(id){
    //OPENING A MODAL//
       Modal.open({
         scope: $scope,                                //You must pass this $scope so that Modal can have a $parent scope
	 controller: 'anotherController',              //name of the controller of the modal (you must define it in anothe
	 controllerAs: 'vm',                           //controllerAs string
	 bindToInstance: {                             //you can pass data to controller with "bindToInstance" and then use it with "vm.id"
	   id: angular.copy(id)
	 },
         properties: {                                 //properties are an optional parameter to pass to the Modal instance of MaterializeCSS Modal. If you dont add the "properties" property then this values will be used as defaults
	   dismissible: false, 
	   opacity: .5, 
	   inDuration: 500, 
	   outDuration: 400, 
	   startingTop: "4%", 
	   endingTop: "10%",
	 },
         templateUrl: "/path/to/modal/template.html", //URL of the template of the Modal. THIS SHOULD BE A VALID MODAL STRUCTURE FROM MATERIALIZE DOCUMENTATION
       }).then(function closed(response){
         console.log("modal closed succesfully");
       }, function dismiss(reason){
         console.log("modal dismissed because: "+reason);
       });
     }
   };
})();
*/

/*USAGE: ONCE THE MODAL IS INSTANTIATED, THE MODAL CONTROLLER RECIEVE A "MODALINSTANCE" INJECTABLE, WITH THAT INSTANCE YOU CAN CLOSE THE MODAL PROGRAMATICALLY
/*NOTE: "modalInstance" injectable will have all the properties that you define in the "bindToInstance" property.
(function(){
  angular
  .module("myModule")
  .controller("anotherController", anotherController);
  
  anotherController.$inject = ["modalInstance"];
  
  function anotherController(modalInstance){
    var vm = this;
    
    vm.closeModal = closeModal;
    vm.dismissModal = dismissModal;
    
    angular.element(function(){
      console.log("bindToInstance Properties", modalInstance);
    });
    
    function closeModal(){
      modalInstance.close("done!");
    };
    
    function dismissModal(){
      modalInstance.dismiss("getting bored!");
    };
  };
})();
*/
(function(){
	'use strict';

	angular
	.module('<YOUR-MODULE-NAME>')
	.factory('Modal', modal);

	modal.$inject = ['$http', '$compile', '$rootScope', '$document', '$q', '$controller', '$timeout'];

	function modal($http, $compile, $rootScope, $document, $q, $controller, $timeout) {
		var service = {
			open: open
		};

		function open(options) {
			var deferred = $q.defer();

			getTemplate(options).then(function (modalBaseTemplate) {
				var modalBase = angular.element(modalBaseTemplate);

				var scope = $rootScope.$new(false, options.scope);
				var modalInstance = {
					params: options.params || {},
					close: function (result) {
						deferred.resolve(result);
						closeModal(modalBase, scope);
					},
					dismiss: function (reason) {
						deferred.reject(reason);
						closeModal(modalBase, scope);
					}
				};

				scope.$close = modalInstance.close;
				scope.$dismiss = modalInstance.dismiss;

				$compile(modalBase)(scope);

				if(typeof options.properties === "undefined"){
					options.properties = {
						dismissible: false, 
						opacity: .5, 
						inDuration: 500, 
						outDuration: 400, 
						startingTop: "4%", 
						endingTop: "10%",
					};
				}
				var openModalOptions = options.properties;

				runController(options, modalInstance, scope);
				console.log(openModalOptions);
				modalBase.appendTo('body').modal(openModalOptions);
				$timeout(function(){
					modalBase.modal('open');
				}, 250, true);

			}, function (error) {
				deferred.reject({ templateError: error });
			});

			return deferred.promise;
		}

		function runController(options, modalInstance, scope) {
			if (!options.controller) return;

			angular.extend(modalInstance, {data: options.bindToInstance});
			var controller = $controller(options.controller, {
				$scope: scope,
				modalInstance: modalInstance
			});

			if (angular.isString(options.controllerAs)) {
				scope[options.controllerAs] = controller;
			}
		}

		function getTemplate(options) {
			var deferred = $q.defer();

			if (options.templateUrl) {
				$http.get(options.templateUrl).then(function successCallback(response){
					deferred.resolve(response.data);
				}, function errorCallback(response){
					deferred.reject(response);
				});
			} else {
				deferred.resolve(options.template || '');
			}


			return deferred.promise.then(function (template) {
				var html = [];
				html.push(template);
				return html.join('');
			});
		}

		function closeModal(modalBase, scope) {
			modalBase.modal('close');

			$timeout(function () {
				scope.$destroy();
				modalBase.remove();
			}, 2000, true);
		}

		return service;
	}
})();