angular-growl w/ animate.css

Add css support to the angular-growl notification module

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://raw.githack.com/marcorinck/angular-growl/master/build/angular-growl.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-animate.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/daneden/animate.css/master/animate.css">
<script src="http://code.angularjs.org/1.2.1/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
    <div data-growl=""></div>
    <div class="buttons">
        <button class="btn btn-danger btn-sm" ng-click="showErr()">Show Error!</button>
        <button class="btn btn-warning btn-sm" ng-click="showWarn()">Show Warning!</button>
        <button class="btn btn-success btn-sm" ng-click="showSuccess()">Show Success!</button>
    </div>
</div>

CSS

.growl {
    position: fixed;
    top: 10px;
    right: 10px;
    float: right;
    width: 250px;
    z-index: 9999;
}
.growl-item.ng-enter {
    -webkit-animation: bounceIn 0.5s;
    animation: bounceIn 0.5s;
}
.growl-item.ng-leave {
    -webkit-animation: bounceOut 0.5s;
    animation: bounceOut 0.5s;
}
.buttons {
    margin: 220px 4px;
}

JavaScript

angular.module('myApp', ['ngAnimate', 'ngSanitize', 'angular-growl']).
config(function (growlProvider) {
    growlProvider.globalTimeToLive(3000);
    growlProvider.globalEnableHtml(true);
}).controller('MainCtrl', function ($scope, growl) {
    $scope.showErr = function () {
        growl.addErrorMessage('<b>Error:</b> Uh oh!');
    };

    $scope.showWarn = function () {
        growl.addWarnMessage('<b>Warning:</b> I\'m a warning!');
    };

    $scope.showSuccess = function () {
        growl.addSuccessMessage('<b>Yay!</b> Something worked.');
    };
});