title: Angular JS - UI router page reload won't set the state
body: <p>This is my main app (app.js)</p>
  
  <pre><code>(function(ng, module) {
      module.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider){
  
          $urlRouterProvider.otherwise("app");
  
          $stateProvider.state('login', {
              url: 'login',
              templateUrl: '/assets/templates/pages/login.html'
          }).state('root', {
              url: '',
              templateUrl: '/assets/templates/pages/index.html'
          });
  
  
      }]);
  }) (angular, angular.module('myapp', ['ui.router', 'myapp.submodule']));
  </code></pre>
  
  <p>This is the submodule (submodule.js)</p>
  
  <pre><code>(function(ng, module) {
      module.config(['$stateProvider', function($stateProvider){
          $stateProvider.state('root.substate', {
              url: 'todo/{type}',
              templateUrl: '/assets/app/todo/todo.html',
              controller: function($stateParams, $scope) {
                  // Do stuff.
              }
          });
      }]);
  
  }) (angular, angular.module('myapp.submodule', ['ui.router']));
  </code></pre>
  
  <p>The expected behaviour would be</p>
  
  <ul>
  <li>redirect to "app" url when no matching route is found</li>
  <li>activate the "root" state on root url</li>
  <li>activate the "root.substate" state on /todo url</li>
  </ul>
  
  <p>This is working fine. </p>
  
  <p>However, if i do refresh the page, the state is not activated and i'm sent back to "app". Why?</p>