AngularJS Notification Service

notification.css

.notifications-service {
    position: fixed;
    top: 10px;
    width: 100%;
    text-align: center;
}
.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.notification-item {
    background: #cacaca;
    padding:10px 0;
    margin: 0 0 10px 0;
}

notification.demo.js

NotificationService.add({text: error.data.error_message});

notification.directive.js

myApp.directive("notifications", function(NotificationService){
    return {
        restrict: "E",
        template: "<div ng-if='notifications.length' class='notifications-service'><ul class='notification-list'><li class='notification-item' ng-repeat='notification in notifications'><span ng-bind='notification.text'></span></li></ul></div>",
        link: function(scope){
            scope.notifications = NotificationService.getAll();
        }
    };
});

notification.service.js

"use strict";
myApp.service("NotificationService", function($timeout){
    var notifications = [];
    this.api = {
        getAll: function(){
            return notifications;
        },
        kill: function(notification){
            this.getAll().splice(this.getAll().indexOf(notification), 1);
            if(typeof notification.callback === "function"){
                notification.callback();
            }
        },
        add: function(notification){
            notification.delay = (notification.delay) ? notification.delay : 5000;
            var that = this;
            notification.tout = $timeout(function(){
                that.kill(notification);
            }, notification.delay);
            that.getAll().push(notification);
        }
    };
    return this.api; 
});