How to build ui router nesting where navigation is first state - with multiple "wizards" with 3 steps or more

Question

I'm trying to build a nested view using AngularJS and UI router. The solution should have multiple steps with different questionares. First step is a menu that leads to different wizards (each with 3 or more steps). Problem is the menu should dissapear once the wizard is initiated.

What i have so far:

.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider

.state("personal-life", {
url:'/personal-life', 
controller:"PersonalCtrl", 
templateUrl: 'views/personal.html'
})

.state("personal-life.step2",{
url:'/step2', 
controller: "PersonalCtrl", 
templateUrl:'views/personal-life/step2.html'
})

.state("personal-life.step2.step3"**,{
url:'/step3', 
controller: "PersonalCtrl", 
templateUrl:'views/personal-life/step3.html'
})

.state("career", {
url:'/career', 
controller:"CareerCtrl", 
templateUrl: 'views/career.html'
})

.state("career.step2",{
url:'/step2', 
controller: "CareerCtrl", 
templateUrl:'views/career/step2.html'
})

.state("career.step2.step3",{
url:'/step3', 
controller: "CareerCtrl", 
templateUrl:'views/career/step3.html'
})

}])

The way i handeled views for now:

in index.html i simply added the navigation into the view itself so it dissapears when first step is loaded. Ui-sref is set to load initial state of different "wizards"

<div ui-view>
  <ul>
    <li><a ui-sref="personal-life">Personal</a></li>
    <li><a ui-sref="career">Career</a></li>
  </ul>
</div>

The file that is loaded after user selects "ui-sref="personal-life" is personal.html:

  <div ui-view>
  <div class="row">
    <div class="small-12 columns">
      <h1>Step 1 / 3</h1>
    </div>
  </div>

  <div class="row">
    <div class="small-12 columns">
    <a ui-sref=".step2" class="small button secondary>Next</a>
    </div>
  </div>
</div>

At this point i also nested the content of a first step into ui-view (this allowed me to load the first step automatically and then next steps are loaded within the same area).

Next part of code:

<div class="row">
  <div class="small-12 columns">
   <h1>Step 2 / 3</h1>
  </div>
</div>

<div class="row">
  <div class="small-12 columns">
     <a ui-sref=".step3" class="small button secondary button-next">Next</a>
  </div>
</div>

This is where i have problems.. I'm not able to "target" the third step. Is it problem in how i constructed the whole solution by placing first step content into ui-view or in the ui-sref link for third step ? Is there are better way to achieve similar solution within UI router ?

Any help would be greatly appreciated...