<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>ui-router transitionTo bug</title>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>

  <script src="https://rawgithub.com/angular-ui/ui-router/818b0d69d2063064ca6d2e3b05252200439862d3/release/angular-ui-router.js"></script>

  <script>
  /**
   * my custom build have the bug fixed
   * replace ui-router script src with
   *
   * //pc035860.github.io/ui-router/build/angular-ui-router.min.js
   */
  </script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <div class="container">
    <div class="nav-container">
      <ul class="nav nav-tabs">
        <li ng-class="{'active': $state.includes('route1')}">
          <a href="" ng-click="$state.transitionTo('route1', {d: 4, e: 5, f: 6}, false)">Route1</a>
        </li>
        <li ng-class="{'active': $state.includes('route2')}">
          <a href="" ng-click="$state.transitionTo('route2', {a: 3, b: 2, c: 1}, false)">Route2</a>
        </li>
        <li ng-class="{'active': $state.includes('route1c')}">
          <a href="" ng-click="$state.transitionTo('route1c', {d: 14, e: 15, f: 16}, {location: false})">Route1 (correct)</a>
        </li>
        <li ng-class="{'active': $state.includes('route2c')}">
          <a href="" ng-click="$state.transitionTo('route2c', {a: 13, b: 12, c: 11}, {location: false})">Route2 (correct)</a>
        </li>
      </ul>
    </div>
    <div ui-view style="min-height: 300px;"></div>

    <hr>

    <div class="inspect">
      <h3>location change log:</h3>
      <pre>{{ locationChgLog }}</pre>
    </div>

  </div>


</body>
</html>
<div class="route">

  <h2>{{ $state.current.data.routeName }}</h2>

  <p ng-show="!$state.current.data.correct">
    Switch between <code>Route1</code> and <code>Route2</code> with <code>$state.transitionTo('state', {}, false)</code> still causes location to change.
  </p>
  <p ng-show="$state.current.data.correct">
    The correct version uses <code>$state.transitionTo('state', {}, {location: false})</code> demostrating the correct behavior - no location change.
  </p>

  <p>&nbsp;</p>

  <h4>Parameters:</h4>
  <pre>{{ params }}</pre>

</div>
angular.module('myApp', ['ui.router'])

.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/route1');

  $stateProvider

    .state('route1', {
      url: '/route1?d&e&f',
      templateUrl: 'route.html',
      data: {
        routeName: 'Route1',
        correct: false
      }
    })

    .state('route1c', {
      url: '/route1?d&e&f',
      templateUrl: 'route.html',
      data: {
        routeName: 'Route1 (correct)',
        correct: true
      }
    })

    .state('route2', {
      url: '/route2?a&b&c',
      templateUrl: 'route.html',
      data: {
        routeName: 'Route2',
        correct: false
      }
    })

    .state('route2c', {
      url: '/route2?a&b&c',
      templateUrl: 'route.html',
      data: {
        routeName: 'Route2 (correct)',
        correct: true
      }
    });

})

.run(function ($rootScope, $state) {
  $rootScope.$state = $state;
})

.controller('MainCtrl', function ($scope, $stateParams, $log) {

  $scope.locationChgLog = '';

  $scope.$stateParams = $stateParams;

  $scope.$watch('$stateParams', function(newValue, oldValue) {
    $scope.params = JSON.stringify(newValue, null, 2);
  }, true);

  $scope.$on('$stateChangeStart', function () {
    $scope.locationChgLog = '';
  });

  $scope.$on('$locationChangeSuccess', function () {
    var args = Array.prototype.slice.call(arguments);

    $scope.locationChgLog += (JSON.stringify({
        time: (new Date()).getTime(),
        from: args[2],
        to: args[1]
      }, null, 2) + '\n\n');
  });

});