title: AngularJS UI-Router multiple states with same URL
body: <p>I have a multipage form made using AngularJS and the AngularUI router ui-router. Each step has it's own URL (/step1 -> /step2 -> /step3). At step 2 the form offers the user a choice between 2 options. Depending on which option is selected I want to be able to send the user to one of two states, but no matter which of the two states is selected I want the URL to change to /step3.</p>
  
  <p>I have tried numerous efforts to get this to work including having the two alternative states one as a child of the other (shown below) resulting in only the parent (step-3-a) being shown, and having an abstract parent step (step-3) with the url and then two child steps (step-3-a, and step-3-b) and routing using the onEnter event and a transition. Both of these failed to display the content correctly (the latter kicked the user out to /user/userId).</p>
  
  <p>It must be possible to route in this manor but I can't seem to make it work. Any help or advice would be gratefully received.</p>
  
  <p>Thanks</p>
  
  <pre><code>$stateProvider
      .state('form', {
        abstract: true,
        views: {
          ...
        }
      })
      .state('user-form', {
        url: '/user/:userId',
        parent: 'form',
        abstract: true,
        views: {
          ...
        }
      })
      .state('step-1', {
        parent: 'user-form',
        url: '/step1',
        data: {
          ...
        },
        views: {
          ...
        }
      })
      .state('step-2', {
        parent: 'user-form',
        url: '/step2',
        data: {
          ...
        },
        views: {
          ...
        }
      })
      .state('step-3-a', {
        parent: 'user-form',
        url: '/step3',
        data: {
          ...
        },
        views: {
          ...
        }
      })
      .state('step-3-b', {
        parent: 'step-3-a',
        data: {
          ...
        },
        views: {
          ...
        }
      })
  </code></pre>