Alerts

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<div ng-app="app" ng-controller="Ctrl">
    <input type="button" value="info" ng-click="Alerts.info('hello')" />
    <input type="button" value="error" ng-click="Alerts.error('hello')" />
    
    <div class="alerts">
        <div class="alert alert-{{alert.type}}" ng-repeat="alert in Alerts.messages" ng-click="Alerts.remove(alert)">
            {{alert.text}}
        </div>
    </div>
</div>

CSS

.alerts {
    position: fixed;
    top: 0;
    right: 0;
}

.alert {
    cursor: pointer;
}

JavaScript

angular.module('app', [])

.factory('Alerts', function($timeout){
    var Alerts = {};
    
    Alerts.messages = [];
    
    var addMessage = function(msgText, type){
        var msg = {text: msgText, type: type};
        Alerts.messages.push(msg);
        $timeout(function(){
            Alerts.remove(msg);
        }, 5000);
    };
    
    Alerts.error = function(msg){
        addMessage(msg, 'error');
    };
    
    Alerts.info = function(msg){
        addMessage(msg, 'info');
    };
    
    Alerts.remove = function(alert) {
        Alerts.messages.splice(Alerts.messages.indexOf(alert), 1);
    }
    
    return Alerts;
})

.controller('Ctrl', function($scope, Alerts){
    $scope.Alerts = Alerts;
});