Dynamic URLs for the tab view

ionic-v1
1

Hey ionic devs! I am the beginner of ionic and is stuck in one stage, I want to use tab view to display different portion of a shopping list and their corresponding urls are

products page: "/list/:listId/products"
stores page : "/list/:listId/stores"
price page: “/list/:listId/stores”

and the corresponding routes are listed as above

$stateProvider

  //all lists page as the starter point
  .state('allLists', {
    url: '/all-lists',
    templateUrl: 'templates/all-lists.html',
    controller: 'AllListsCtrl'
  })

  //add list page
  .state('addList', {
    url: '/add-list',
    templateUrl: 'templates/add-list.html',
    controller: 'AddListCtrl'
  })

  //tab view for list, abstract state setting up
  .state('list', {
    url: '/list/:listId',
    abstract: true,
    templateUrl: 'templates/list.html'
  })

  //products page for list
  .state('list.products', {
    url: '/products', 
    views: {
      'list-products': {
        templateUrl: 'templates/list-products.html',
        controller: 'ListProductsCtrl'
      }
    }
  })

  //store page for list
  .state('list.stores', {
    url: '/stores',
    views: {
      'list-stores': {
        templateUrl: 'templates/list-stores.html',
        controller: 'ListStoresCtrl'
      }
    }
  })

  //price page for list
  .state('list.price', {
    url: '/price',
    views: {
      'list-price': {
        templateUrl: 'templates/list-price.html',
        controller: 'ListPriceCtrl'
      }
    }
  })

However, in “templates/list.html”, I try to do the following things

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Products Tab -->
  <ion-tab title="Products" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/list/{{listId}}/products">
    <ion-nav-view name="list-products"></ion-nav-view>
  </ion-tab>

  <!-- Stores Tab -->
  <ion-tab title="Stores" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/list/{{listId}}/stores">
    <ion-nav-view name="list-stores"></ion-nav-view>
  </ion-tab>

  <!-- Price Tab -->
  <ion-tab title="Price" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/list/{{listId}}/price">
    <ion-nav-view name="list-price"></ion-nav-view>
  </ion-tab>


</ion-tabs>

But the link returned is “#/list//price” and “#/list//stores”… I would like to ask how to assign the listId into the element