title: ui-router renders template before state changes
body: <p>I have a nested state structure like this:</p>
  
  <pre><code>$stateProvider
          .state('main', {
              url: '',
              abstract: true,
              templateUrl: ...
              controller: mainController,
              resolve: {
                  Resolve1: ...
                  Resolve2: ...
              }
          })
          .state('main.state1', {
              url: '^/state1/:id/',
              templateUrl: ....
              controller: state1Controller,
              resolve: {
                  Resolve11: ...
                  Resolve22: ...
              },
          })
          .state('main.state2', {
          ....
  </code></pre>
  
  <p>From what I am seeing, when you are at state <code>main.state1</code> and you navigate to the same state with another <code>id</code> parameter, the template for <code>main.state1</code> is rendered fine but the template for <code>main</code> (the parent) is rendered before the state changes (I guess it doesn't wait for the data resolution of <code>main.state1</code>). This results to the view being rendered with the wrong data (more specifically, the state parameters that I use for generating links are wrong).</p>
  
  <p>My <code>mainController</code> has the <code>$stateParams</code> and <code>$state</code> injected to it and that's where I get the data from.</p>
  
  <p>Did anyone notice this before? Is this by design or is it a bug?</p>
  
  <p>Is there any way to update the parent view with the latest data?</p>
  
  <p>However, I would expect ui-router to wait for all data resolutions until it starts rendering the views (even the parent). I don't know if I am missing something here, but this is my understanding of the problem so far...</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I see now that a function that is involved in the view rendering (with interpolation) gets called many times, first with the old values and then with the new values. But the final result that I see on screen is using the initial data that were used when I first entered the 'main.*' state. This is SO weird.</p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>I have found that my links where not updated ONLY when using ui-sref (note that I was using parameters in the state href, e.g. ui-sref="main.state1({id:{{getId()}}})"). When switched to ng-href everything worked as expected.</p>
  
  <p>I have no idea why, but that fixed the problem.</p>
  
  <p>The odd thing was that the ui-sref was evaluated, but the link was not updated.</p>
  
  <p>Go figure...</p>
  
  <p><strong>UPDATE 3:</strong></p>
  
  <p>This solution in turn caused other problems. Then the first click reloaded the application... So this is not the best fix...</p>