Demo ui.router promise issue

<!DOCTYPE html>
<html>
  <head>
    <script src="//unpkg.com/angular/angular.js"></script>
    <script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.js"></script>
    <script src="script.js"></script>
    <title>Plunk demonstrating ui-router issue</title>
  </head>

  <body ng-app="demo">
    <a ui-sref="home">home</a>
    <a ui-sref="foo">home.foo</a>
    <a ui-sref="foo2">home.foo2</a><br/><br />
    <div ui-view />
  </body>
</html>

// Here's a skeleton app.  Fork this plunk, or create your own from scratch.
var app = angular.module('demo', ['ui.router']);

app.controller('foo', ['$transitions', '$q', '$timeout', function($transitions, $q, $timeout) {
            var self = this;

            self.doSomething = function() {
                var deferred = $q.defer();

                $timeout(function() {
                  deferred.reject("REJECT");
                }, 2000);

                return deferred.promise;
            }

            $transitions.onStart({from: 'foo' }, function() { 
              return self.doSomething();
            });
}]);

app.controller('foo2', ['$transitions', function($transitions) {
            var self = this;

            self.doSomething = function() {
                return false;
            }

            $transitions.onStart({from: 'foo2' }, function() { 
              return self.doSomething();
            });
}]);

app.controller('home', ['$transitions', function($transitions) {
}]);

// Define your example states here.
app.config(function($stateProvider, $urlRouterProvider) {
  
  $urlRouterProvider.otherwise('home')
  
  $stateProvider.state({ 
    name: 'home', 
    url: '/home', 
    template: 'Home',
    controller: 'home'
  });
  
  $stateProvider.state({ 
    name: 'foo', 
    url: '/foo', 
    template: 'foo',
    controller: 'foo'
  });

    $stateProvider.state({ 
    name: 'foo2', 
    url: '/foo2', 
    template: 'foo2',
    controller: 'foo2'
  });
});