angularjs AlertService.

alerts.html

<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()">{{ alert.msg }}</alert>

AlertService.js

'use strict';

angular.module('xdiamondApp')
    .factory('AlertService', ['$timeout', '$rootScope', function ($timeout, $rootScope) {
        var service = {};

        var alerts = [];

        //all template can use alerts like follow:
        //<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()">{{ alert.msg }}</alert>
        $rootScope.alerts = alerts;

        service.closeAlertIdx = function (index) {
            return alerts.splice(index, 1);
        }

        service.closeAlert = function (alert) {
            return service.closeAlertIdx(alerts.indexOf(alert));
        }

        service.add = function(type, msg, timeout){
            var alert = {
                type: type,
                msg: msg,
                close: function () {
                    return service.closeAlert(this);
                }
            }
            if(timeout){
                $timeout(function(){
                    alert.close();
                }, timeout);
            }
            return alerts.push(alert);
        }

        service.add('danger', 'abc');

        service.clear = function () {
            alerts.length = 0;
        }

        service.get = function () {
            return alerts;
        }

        return service;
    }])