ui-router-extras $transition$ injectable promise

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.22" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>
    <script data-require="ui-router-extras@0.0.10" data-semver="0.0.10" src="https://rawgit.com/christopherthielen/ui-router-extras/0.0.10/release/ct-ui-router-extras.js"></script>
    <link data-require="angular-toastr@0.4.0" data-semver="0.4.0" rel="stylesheet" href="https://rawgit.com/Foxandxss/angular-toastr/0.4.0/dist/angular-toastr.css" />
    <script data-require="angular-toastr@0.4.0" data-semver="0.4.0" src="https://rawgit.com/Foxandxss/angular-toastr/0.4.0/dist/angular-toastr.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      pre { display: inline-block } ;
    </style>
  </head>
  

  <body ng-app="demo">
    <toaster-container></toaster-container>
    <ul>
      <li>
        <a ui-sref="top">top</a> Uses <b>$scope.$on('$transitionStart')</b> to access the promise
      </li>
      <li>
        <a ui-sref="A">top.A</a> Injects <b>$transition$</b> into the controller
      </li>
      <li>
        <a ui-sref="B">top.A.B</a> Injects <b>$transition$</b> into <b>onEnter/onExit</b>
      </li>
      <li>
        <a ui-sref="C">top.A.B.C</a>
      </li>
      <li>
        <a ui-sref="resolvefail">top.resolvefail</a> Has a resolve that fails to load
      </li>
    </ul>
    <h1>Hello Plunker!</h1>
    <ui-view></ui-view>
  </body>

</html>

// Code goes here

var app = angular.module("demo", ['ui.router', 'ct.ui.router.extras', 'toastr']);


app.config(function($stateProvider) {
  var $sp = $stateProvider;

  $sp.state({
    name: 'top',
    url: "",
    template: '<h1>top</h1><ui-view/>',
    controller: function($scope, messages, $timeout, toastr) { 
      $scope.$on("$transitionStart", function(evt, $transition$) {
        messages.add("$transition started " + makeMessage($transition$));
        
        $transition$.promise.then(function() { 
          messages.add("[top] transition success " + makeMessage($transition$));
        }, function() { 
          messages.add("[top] transition failure " + makeMessage($transition$));
        });
        
        var kind;
        $transition$.promise.then(function() {
          kind = "info";
        }, function() {
          kind = "error";
        }).finally(function() { 
          toast(kind, toastr, messages, $timeout); 
        });
        
        messages.add("[top] $stateChangeStart event");
      });
    }
  });
  
  $sp.state({
    name: 'A',
    url: "/a",
    parent: 'top',
    template: '<h2>A</h2><ui-view/>',
    controller: function($transition$, messages) { 
      $transition$.promise.then(function() {
        messages.add("  [A] controller: transition success " + makeMessage($transition$))
      }, function() {
        messages.add("  [A] controller: transition failure " + makeMessage($transition$))
      });
    }
  });

  $sp.state({
    name: 'B',
    url: "/b",
    parent: 'A',
    template: '<h2>B</h2><ui-view/>',
    onEnter: function($transition$, messages) { 
      $transition$.promise.then(function() {
        messages.add("  [B] onEnter: transition success " + makeMessage($transition$))
      }, function() {
        messages.add("  [B] onEnter: transition failure " + makeMessage($transition$))
      });
    },
    onExit: function($transition$, messages) { 
      $transition$.promise.then(function() {
        messages.add("  [B] onExit: transition success " + makeMessage($transition$))
      }, function() {
        messages.add("  [B] onExit: transition failure " + makeMessage($transition$))
      });
    }

  });

  $sp.state({
    name: 'C',
    url: "/c",
    parent: 'B',
    template: '<h2>C</h2><ui-view/>'
  });

  $sp.state({
    name: 'resolvefail',
    url: "/resolvefail",
    parent: 'top',
    template: '<h2>shouldnt get here</h2><ui-view/>',
    resolve: {
      fails: function($q) { 
        return $q.reject("fails");
      }
    }
  });

  function makeMessage($transition$) { 
    return $transition$.from.state.name + "->"+ $transition$.to.state.name;
  }
});

app.service('messages', function(toastr) { 
  var messages = [];
  return { 
    add: function (msg) { 
      messages.push(msg);
      console.log(msg);
    },
    get: function() {
      return messages;
    },
    clear: function() { 
      messages = [];
    }
  }
});

  var count = 0;
  function toast(type, toastr, messages, $timeout) {
    // $timeout(function() {
      var msgs = messages.get().map(function(msg) { return "<li>" + msg + "</li>"}).join("");
      var msg = "<ul>" + msgs + "</ul>";
      var title = "Transition "+ count++;
      var opts = { allowHtml: true, positionClass: 'toast-bottom-full-width', };
      var fn = toastr[type];
      fn(msg, title, opts); 
      messages.clear(); 
    // });
  }

/* Styles go here */