maxkoretskyi/gist:89e8a8c7876671fbd893

## gistfile1.html
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script>
		// Here's a skeleton app.  Fork this plunk, or create your own from scratch.
		var app = angular.module('demonstrateissue', ['ui.router']);

		// Empty config block.  Define your example states here.
		app.config(function($stateProvider, $urlRouterProvider) {
		  $stateProvider.state({ name: 'home', url: '/home', controller: function() { }, templateUrl: 'home.html'});
		  $stateProvider.state({ name: 'home.foo', url: '/foo', controller: function() { }, templateUrl: 'foo.html'});
		  $urlRouterProvider.when("/", "/home");
		});

		// Adds state change hooks; logs to console.
		app.run(function($rootScope, $state, $location, $urlRouter, $timeout, $templateCache) {

		  $templateCache.put("home.html","<h1>home state loaded</h1>");

		  $rootScope.$state = $state;
		  $rootScope.$location = $location;

		  function message(to, toP, from, fromP) {
			return from.name  + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
		  }

		  var userResolved = false;
		  var timeoutSet = false;

		  $rootScope.$on("$stateChangeStart",   function(evt, to, toP, from, fromP)      {

			console.log("Start:   " + message(to, toP, from, fromP));

			if (!userResolved) {
			  console.log("preventing event");
			  evt.preventDefault();
			  if (!timeoutSet) {
					$timeout(function(){
					userResolved = true;
					$urlRouter.sync();
				  }, 1000);
				  timeoutSet = true;
			  }
			}

		  });
		  $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP)      { console.log("Success: " + message(to, toP, from, fromP)); });
		  $rootScope.$on("$stateChangeError",   function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });
		});

	</script>
</head>
  <body ng-app="demonstrateissue">

      <div ui-view>ui-view not populated</div>

      <div class="header">
        Current URL: <b>{{$location.url() }}</b> <br>
        Current State: <b>{{$state.current.name }}</b> <br>
        Current Params: <b>{{$state.params | json }}</b><br>
        Go to state:
        <select ng-model="foo" ng-change="$state.go(foo); foo = '';"
          ng-options="state as state.name for state in $state.get()">
               <option value="">Choose a state</option>
          </select>
      </div>
  </body>
</html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script>
	// Here's a skeleton app. Fork this plunk, or create your own from scratch.
	var app = angular.module('demonstrateissue', ['ui.router']);

	// Empty config block. Define your example states here.
	app.config(function($stateProvider, $urlRouterProvider) {
	$stateProvider.state({ name: 'home', url: '/home', controller: function() { }, templateUrl: 'home.html'});
	$stateProvider.state({ name: 'home.foo', url: '/foo', controller: function() { }, templateUrl: 'foo.html'});
	$urlRouterProvider.when("/", "/home");
	});

	// Adds state change hooks; logs to console.
	app.run(function($rootScope, $state, $location, $urlRouter, $timeout, $templateCache) {

	$templateCache.put("home.html","<h1>home state loaded</h1>");

	$rootScope.$state = $state;
	$rootScope.$location = $location;

	function message(to, toP, from, fromP) {
	return from.name + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
	}

	var userResolved = false;
	var timeoutSet = false;

	$rootScope.$on("$stateChangeStart", function(evt, to, toP, from, fromP) {

	console.log("Start: " + message(to, toP, from, fromP));

	if (!userResolved) {
	console.log("preventing event");
	evt.preventDefault();
	if (!timeoutSet) {
	$timeout(function(){
	userResolved = true;
	$urlRouter.sync();
	}, 1000);
	timeoutSet = true;
	}
	}

	});
	$rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP) { console.log("Success: " + message(to, toP, from, fromP)); });
	$rootScope.$on("$stateChangeError", function(evt, to, toP, from, fromP, err) { console.log("Error: " + message(to, toP, from, fromP), err); });
	});

	</script>
	</head>
	<body ng-app="demonstrateissue">

	<div ui-view>ui-view not populated</div>

	<div class="header">
	Current URL: <b>{{$location.url() }}</b> <br>
	Current State: <b>{{$state.current.name }}</b> <br>
	Current Params: <b>{{$state.params \| json }}</b><br>
	Go to state:
	<select ng-model="foo" ng-change="$state.go(foo); foo = '';"
	ng-options="state as state.name for state in $state.get()">
	<option value="">Choose a state</option>
	</select>
	</div>
	</body>
	</html>