Untitled

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

  <head>
    <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 data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <button ui-sref="B">go to B</button>
    <button ui-sref="A">go to A</button>
    <div ui-view=""></div>
  </body>

</html>

// Code goes here

angular.module('app', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider.state('A', {
      url: "/A",
      template: "this is A state"
    })
      .state('B', {
        url: "/B",
        template: "this is B state",
        resolve: {
          data: function($timeout) {
            return $timeout(function() {
              console.log("B resolve");
              return [];
            }, 4000);
          }
        }
      });
  })
  .controller('MainController', function($state, $rootScope) {
    $state.go("A");

    $rootScope
      .$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams) {
          console.log("$stateChangeStart to state", toState.name);
        });
        
    $rootScope
      .$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams) {
          console.log("$stateChangeSuccess to state", toState.name);
        });
  });

/* Styles go here */