<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="toastrCtrl as vm">
    <h1>Toasters...</h1>
    <hr />
    <div>
      <button class="btn btn-info" ng-click="vm.info()">Info</button>
      <button class="btn btn-warning" ng-click="vm.warning()">Warning</button>
      <button class="btn btn-success" ng-click="vm.success()">Success</button>
      <button class="btn btn-danger" ng-click="vm.error()">Error</button>
      <button class="btn btn-primary" ng-click="vm.clear()">Clear</button>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>
(function() {
    angular
      .module('app', [])
      .controller('toastrCtrl', toastrCtrl);

    function toastrCtrl() {
      var vm = this;
      vm.name = 'test';

      vm.setOptions = function() {
        toastr.options.positionClass = "toast-bottom-right";
        toastr.options.closeButton = true;
        toastr.options.showMethod = 'slideDown';
        toastr.options.hideMethod = 'slideUp';
        //toastr.options.newestOnTop = false;
        toastr.options.progressBar = true;
      };

      vm.setOptions();

      vm.info = function() {
        toastr.info('This is an info toaster');
      };
      vm.warning = function() {
        toastr.warning('This is a warning toaster');
      };
      vm.success = function() {
        toastr.success('This is a success toaster');
      };
      vm.error = function() {
        toastr.error('This is an error toaster');
      };

      vm.clear = function() {
        toastr.clear();
      };
    };
})();
/* Styles go here */