Angular using Toastr for notifications. Setting theme as Bootstrap instead of Toastr default.

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="https://raw.github.com/CodeSeven/toastr/master/toastr.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div class="alert alert-block alert-{{flash.get().type}}" ng-show="flash.get().body">
    <h4>{{flash.get().title}}</h4>
    <p>{{flash.get().body}}</p>
  </div>
  <div ng-view></div>
  <hr />
  <label>Message Title</label>
  <input ng-model="msgTitle" placeholder="Title"><br />
  <label>Message Body</label>
  <input ng-model="msgBody" placeholder="Body"><br />
  <label>Message Type</label>
  <select ng-model="msgType">
    <option value="success">Success</option>
    <option value="info">Info</option>
    <option value="warning">Warning</option>
    <option value="error">Error</option>
  </select><br />
  <hr />
  <p>
    <a ng-click="flash.push({title: msgTitle, body: msgBody, type: msgType})" class="btn">
      Growl      
    </a>
    <a ng-click="flash.clearAll()" class="btn btn-warning">
      Clear All
    </a>
  </p>
</body> 
</html>

/**
 * Contents of https://raw.github.com/CodeSeven/toastr/master/toastr.css
 *
 * plunker wouldn't load it from github properly.
 */
.toast-title
{
    font-weight: bold;
}

.toast-message
{
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

    .toast-message a,
    .toast-message label
    {
        color: #FFF;
    }

        .toast-message a:hover
        {
            color: #CCC;
            text-decoration: none;
        }

.toast-top-left
{
    left: 12px;
    top: 12px;
}

.toast-bottom-right
{
    bottom: 12px;
    right: 12px;
}

.toast-bottom-left
{
    bottom: 12px;
    left: 12px;
}

#toast-container
{
    position: fixed;
    z-index: 9999;
}

#toast-container > div {
    width: 300px;
}

.toast
{
    background-color: #030303;
}

.toast-success
{
    background-color: #51A351;
}

.toast-error
{
    background-color: #BD362F;
}

.toast-info
{
    background-color: #2F96B4;
}

.toast-warning
{
    background-color: #F89406;
}

.toast-top-right
{
    right: 12px;
    top: 12px;
}

#toast-container > :hover
{
    -moz-box-shadow: 0 0 12px #000000;
    -webkit-box-shadow: 0 0 12px #000000;
    box-shadow: 0 0 12px #000000;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

var app = angular.module('plunker', []);

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      template: "<b>Home!</b>"
    }) 
});

app.controller('MainCtrl', function($scope, growlToast) {
  $scope.msgTitle = 'Alert';
  $scope.msgBody  = 'The Tomatoes Exploded!';
  $scope.msgType  = 'warning';

  $scope.flash = growlToast;
}); 
 
app.factory("growlToast", function() {
  var queue = [];
  
  toastr.options = {
    "debug": false,
    "positionClass": "toast-top-right",
    "onclick": null,
    "fadeIn": 300,
    "fadeOut": 1000,
    "timeOut": -1,
    "extendedTimeOut": 1000,
    toastClass: 'alert',
    iconClasses: {
        error: 'alert-error',
        info: 'alert-info',
        success: 'alert-success',
        warning: 'alert-warning'
    }
  };
  
  return {
    clearAll: function () {
      toastr.clear();
      queue = [];
    },
    push: function(message) {
      switch(message.type) {
        case 'success':
          queue.push(toastr.success(message.body, message.title));
          break;
        case 'info':
          queue.push(toastr.info(message.body, message.title));
          break;
        case 'warning':
          queue.push(toastr.warning(message.body, message.title));
          break;
        case 'error':
          queue.push(toastr.error(message.body, message.title));
          break;
      }
      console.log(queue);
    }
  };
});