Multiple Nested Views + Tabs

Hi guys! First I’m sorry if this is already asked. I searched the forum and found some topics about it but although they helped in some levels, I’m still stuck in this.

I have this flow in my app:

  • Home: Splash screen with a button that leads to the next page
    • Versions: Shows a list with 4 (or more) car models. Selecting a car sends the id to the router so the next menu is all dependent on the choice here.
      • Home of the model chosen above with a tabbed menu. Each item in this menu should link to the funcionality of the version chosen.

So the best way I thought to build this router would be:

  .state('home', {
    url: '/',
    templateUrl: 'templates/home.html'
  })

  .state('versions', {
    url: '/versions',
    templateUrl: 'templates/versions.html',
    controller: 'VersionsCtrl'
  })
    .state('versions.car', {
      url: '/versions/:id',
      templateUrl: 'templates/version-home.html',
      controller: 'VersionCtrl'
    })
      .state('versions.car.gallery', {
        url: '/versions/:id/gallery',
        templateUrl: 'templates/gallery.html',
        controller: 'GalleryCtrl'
      })

So the gallery page should open the gallery for that specific car model.

It goes through until the vesions.html page but when I try to go to a car model (#/versions/1 for example) it doesn’t work. I didn’t even started the tab menu because the named views would depend on the ID which is getting complicated on how to get… Could anyone help me here? Really appreciate this :slight_smile: