title: Angular JS ui-router how to redirect to a child state from a parent?
body: <p>When using onEnter to redirect to a state, if the new state is a child of the current state, an infinite loop occurs.</p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>$stateProvider
    .state 'inventory',
      url: '/inventory'
      templateUrl: 'views/inventory.html'
      controller: 'InventoryCtrl'
      onEnter: () -&gt;
        $state.go 'inventory.low'
    .state 'inventory.low',
      url: '/low'
      templateUrl: 'views/inventory-table.html'
      controller: 'LowInventoryCtrl'
  </code></pre>
  
  <p>When:</p>
  
  <pre><code>$state.go 'inventory.low'
  </code></pre>
  
  <p><strong>Is called, the state <code>inventory</code> is re-initialized, causing it to be called again = infinite loop.</strong></p>
  
  <p>However, if the redirect state is:</p>
  
  <pre><code>$state.go 'otherStateThatIsNotAChild'
  </code></pre>
  
  <p>This issue does not occur. I assume that the parent state is being re-initialized, but why?</p>
  
  <ol>
  <li>Why is the parent state being reinitialized when <code>.go</code> is called on a child state?</li>
  <li>How then, would you handle redirecting to a child state?</li>
  </ol>