title: AngularJS - UI-Router with wizard
body: <p>I'm using ui-router to setup my routes like below:</p>
  
  <pre><code>$stateProvider
      .state('root', {
          url: "",
          templateUrl: 'path/login.html',
          controller: 'LoginController'
      })
      .state('basket', {
          url: "/basket",
          views: {
              '': {
                  templateUrl: 'path/basket.html',
                  controller: 'BasketController'
              },
              'address@basket': {
                  templateUrl: 'path/address.html',
                  controller: 'AddressController'
              },
              'confirmation@basket': {
                  templateUrl: 'path/confirmation.html',
                  controller: 'ConfirmationController'
              },
              'payment@basket': {
                  templateUrl: 'path/payment.html',
                  controller: 'PaymentController'
              }
          }
      });
  </code></pre>
  
  <p>In my <code>basket.html</code> I'm using <code>mgo-angular-wizard</code> to create a "step bar".</p>
  
  <pre><code>&lt;wizard on-finish="finishedWizard()"&gt;
  
  &lt;wz-step title="Address"&gt;
      &lt;div ui-view="address"&gt;&lt;/div&gt;
  &lt;/wz-step&gt;
  
  &lt;wz-step title="Confirmation"&gt;
      &lt;div ui-view="confirmation"&gt;&lt;/div&gt;
  &lt;/wz-step&gt;
  
  &lt;wz-step title="Payment"&gt;
      &lt;div ui-view="payment"&gt;&lt;/div&gt;
  &lt;/wz-step&gt;
  </code></pre>
  
  <p></p>
  
  <p>So far it's working fine. But I need to create buttons that will also navigate between those pages. For example: Address page needs a button which is going to call Confirmation page.
  I saw some pages in the web which were using <code>ui-sref="$state.go('basket.address')"</code> but, since I'm not using this structure (with dot), I don't know how to do it (using <code>confirmation@basket</code> isn't working).</p>
  
  <p>I'm new to Angular and learning on the flow. Thanks in advance.</p>