title: angular-ui-router always redirects to $urlRouterProvider.otherwise
body: <p>In my <strong>Angular SPA</strong> application, when type the address into the address bar or click on <code>ui-sref</code> link, I am always redirected to the <code>$urlRouterProvider.otherwise</code>. My Code is given below:</p>
  
  <pre><code>  angular.module('gamopot-app', [ 'ui.router' ] )
        .config(function( $stateProvider, $urlRouterProvider ) {
            // always redirect to here 
            $urlRouterProvider.otherwise('/home');
  
            // Home state routing
            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: 'modules/core/client/views/home.client.view.ejs',
                    controller: 'IndexCtrl'
                })
                 // won't work for http://localhost:3000/#/game
                .state('game', {
                    url: '/game',
                    templateUrl: 'modules/game/client/views/list-games.client.view.ejs',
                    controller: 'GameIndexCtrl'
                 })
                 // won't work for http://localhost:3000/#/demo
                .state('demo', {
                    url: '/demo',
                    templateUrl: 'modules/core/client/views/demo.home.client.view.ejs',
                    controller: 'DemoIndexCtrl'
                 });
  });
  </code></pre>
  
  <p><strong>index.ejs</strong></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html lang="en" ng-app="gamopot-app" ng-controller="MainCtrl as main"&gt;
      &lt;body&gt;
          &lt;div class="container" style="width:100%;"&gt;
               &lt;!--&lt;ui-view&gt;&lt;/ui-view&gt;--&gt;
                &lt;div ui-view&gt;&lt;/div&gt;
           &lt;/div&gt;       
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>modules/core/client/views/home.client.view.ejs</strong></p>
  
  <pre><code>  &lt;div ng-controller="IndexCtrl"&gt;
         &lt;!-- main index view --&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>modules/core/client/views/home.client.view.ejs</strong></p>
  
  <pre><code>  &lt;div ng-controller="IndexCtrl"&gt;
         &lt;!-- main index view --&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>modules/core/client/views/demo.home.client.view.ejs</strong></p>
  
  <pre><code>   &lt;div ng-controller="DemoIndexCtrl"&gt;
         &lt;h1&gt;{{test_demo}}&lt;/h1&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>modules/game/client/views/list-games.client.view.ejs</strong></p>
  
  <pre><code>  &lt;div ng-controller="GameIndexCtrl"&gt;
      &lt;h1&gt; {{test_game}} &lt;/h1&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas what I'm doing wrong?</p>