title: angularJS: ui-router $state.go only works on first click
body: <p>I'm trying to learn how to use AngularJS and I stumbled upon a problem I can't solve...</p>
  
  <p>The code below should:
  - show 2 views: 1 to show some names ("receivers") on the left and one to show the main content (an intro or a list for the corresponding person ("currentReceiver"))
  - navigate via $state.go to the corresponding "wishlist" and changing the URL to ".../#/wishlist/"</p>
  
  <p>The code I have seems to work only when I click on a name the first time... Once I've clicked once, the url stays empty ('.../#/') and the intro page is shown...</p>
  
  <p>Can somebody explain me what I'm doing wrong or where I should look to debug this problem...?</p>
  
  <p><strong>Part of my index.html</strong>
      </p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-md-2 sidebar" ui-view="wishlists"&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-20 col-sm-offset-3 col-md-10 col-md-offset-2 main" ui-view="wishes"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- scripts --&gt;
      ...     
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>wishlist.tmpl.html</strong>
  (template of view 'wishlist' on left hand side wish link to functon "setCurrentReceiver")</p>
  
  <pre><code>&lt;ul class="nav nav-sidebar"&gt;
      &lt;li ng-repeat="receiver in receivers" ng-class="{'active': isCurrentReceiver(receiver)}"&gt;
          &lt;a href="#" ng-click="setCurrentReceiver(receiver)"&gt;{{receiver.name}}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>gimmi-app.js</strong>
  (with $state.go in function setCurrentReceiver)</p>
  
  <pre><code>angular.module('Gimmi', [
      'ui.router',
      'wishlist',
      'wishlist.wish',
      'wishlist.receiver'
  ])
  .config(function($stateProvider, $urlRouterProvider){
      $stateProvider
          .state('gimmi', {
              url: '',
              abstract: true
          })
      ;
      $urlRouterProvider.otherwise('/');
  })
  
  .controller('MainCtrl', function ($scope, $state) {
      //--------------------------------------------------
      // RECEIVER MODULE
      //--------------------------------------------------
  
      $scope.receivers = [
          {"id": 1, "name": "XXX", "age": 31, "gender": "m"},
          {"id": 2, "name": "YYY", "age": 28, "gender": "v"},
          {"id": 3, "name": "ZZZ", "age": 59, "gender": "v"},
      ];
  
      $scope.currentReceiver = null;
  
      function setCurrentReceiver(receiver) {
          $scope.currentReceiver = receiver;
  
          $state.go('gimmi.wishlist.wish', {receiverName: receiver.name});
  
          cancelEditing();
          cancelCreating();
      }
  
      function isCurrentReceiver(receiver) {
          return $scope.currentReceiver !== null &amp;&amp; receiver.id === $scope.currentReceiver.id;
      }
  
      $scope.setCurrentReceiver = setCurrentReceiver;
      $scope.isCurrentReceiver = isCurrentReceiver;
  
      //--------------------------------------------------
      // WISHLIST MODULE
      //--------------------------------------------------
  
      $scope.wishes = [
  
          {"id": 1, "title": "Smartphone", "price": 250, "status": "reserved", "receiverID": 1},
          {"id": 2, "title": "Lamzac", "price": 75, "status": "free", "receiverID": 1},
          {"id": 3, "title": "Fatboy", "price": 140, "status": "free", "receiverID": 1},
          {"id": 4, "title": "Pioneer DJM 800", "price": 800, "status": "reserved", "receiverID": 1},
          {"id": 5, "title": "Snowboard", "price": 500, "status": "free", "receiverID": 2}
  
      ];
  </code></pre>
  
  <p><strong>wishlist.js</strong> 
  (with the view to show the left hand side and the intro page when url = '/')</p>
  
  <pre><code>angular.module('wishlist', [
      'gimmi.models.wishlist'
  ])
      .config(function($stateProvider){
          $stateProvider
              .state('gimmi.wishlist', {
                  url: '/',
                  views: {
                      'wishlists@': {
                          controller: 'wishlistCtrl',
                          templateUrl: 'app/wishlist/wishlist.tmpl.html'
                      }
                      ,'wishes@': {
                          controller: 'wishCtrl',
                          templateUrl: 'app/wishlist/intro.tmpl.html'
                      }
                  }
              })
          ;
      })
  
      .controller('wishlistCtrl', function wishlistCtrl($scope){
  
      });
  });
  </code></pre>
  
  <p><strong>wish.js</strong>
  (the .js with the state to which I refer in $state.go)</p>
  
  <pre><code>angular.module('wishlist.wish', [
      'gimmi.models.wishlist',
      'gimmi.models.wish',
      'wishlist.wish.create',
      'wishlist.wish.edit'    
  ])
      .config(function($stateProvider){
  
          $stateProvider
              .state('gimmi.wishlist.wish', {
                  url: 'wishlist/:receiverName',
                  views: {
                      'wishes@': {
                          templateUrl: 'app/wishlist/wish/wish.tmpl.html',
                          controller:'wishCtrl'
                      }
                  }
              })
          ;
      })
  
      .controller('wishCtrl', function($scope, $stateParams) {
          $scope.currentReceiverName = $stateParams.receiverName;
      })
  
  ;
  </code></pre>