alertController.js

var alertChannel = "alertChannel";
  	$scope.alerts = [];
		
		$rootScope.$on(alertChannel, function(event, data) {
          	$scope.alerts.push(data);
                 
          	$timeout(function(data) {
           		if ($scope.alerts.length > 0) {           	
           			$scope.closeAlert(0);
           		}           			
          	}, timeout);
        });

	  	$scope.closeAlert = function(index) {
    		$scope.alerts.splice(index, 1);
  		};

  		$scope.msg = function(type) {
    		messageEmitter.message('Message', 'Please check the message below!', type);
  		};

index.html

<div class="container-fluid" ng-controller="alertController" style="padding-top: 60px">
  		<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
				<h4 class="alert-heading">{{alert.title}}</h4>
				<p>{{alert.msg}}<p>
			</alert>
		</div>

messageEmitter.js

var service = function($rootScope) {
  	var alertChannel = 'alertChannel';

		var message = {};
		var messageEmitter = { 
			message : function(title, msg, type) {
			   	message = {
			    	title : title,
			    	msg : msg,
			    	type : type
					}
				$rootScope.$broadcast(alertChannel, message);  
			}
		};
		return messageEmitter;
	}
	service.$inject = ['$rootScope'];