ionic multiple view states for one tab

I have a four tab setup and it works just as desired.

On one of the tabs however, I want there to be three states inside it. Reason being because I want the tab to stay active but while showing different content states. I made two extra states by adding "hidden" tabs but then the tab icon at the bottom isn't "active" anymore when using the additional states.

How can I make it so that I can have multiple states for one tab while keeping that tab's icon active the whole time? I should mention that I want to keep < back functionality as well.

App.Config

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('welcome', {
    url:'/',
    templateUrl:'templates/welcome.html',
    controller:'WelcomeCtrl'
  })
  .state('sign-up', {
    url: '/sign-up',
    templateUrl: 'templates/sign-up.html',
    controller: 'SignUpCtrl'
  })
  .state('forgot-password', {
    url:'/forgot-password',
    templateUrl:'templates/forgot-password.html',
    controller:'ForgotPasswordCtrl'
  })

  .state('tabs', {
    url:'/tab',
    abstract:true,
    templateUrl:'templates/tabs.html'
  })
  .state('tabs.map', {
    url:'/map',
    views: {
      'map-tab':{
        templateUrl:'templates/map.html',
        controller:'MapCtrl'
      }
    }
  })
  .state('tabs.favorites', {
    url:'/favorites',
    views: {
      'favorites-tab':{
        templateUrl:'templates/favorites.html',
        controller:'FavoritesCtrl'
      }
    }
  })
  .state('tabs.coupons', {
    url:'/coupons',
    views: {
      'coupons-tab':{
        templateUrl:'templates/coupons.html',
        controller:'CouponsCtrl'
      }
    }
  })
  .state('singles', {
    url:'/singles/{location_id:\\d+}',
    cache: false,
    templateUrl:'templates/singles.html',
    controller:'SinglesCtrl'
  })
  .state('coupon', {
    url:'/coupon/{location_id:\\d+}/{coupon_id:\\d+}',
    cache: false,
    templateUrl:'templates/coupon.html',
    controller:'CouponCtrl'
  })
  .state('tabs.settings', {
    url:'/settings',
    views: {
      'settings-tab':{
        templateUrl:'templates/settings.html',
        controller:'SettingsCtrl'
      }
    }
  })

  $urlRouterProvider.otherwise('/');
})

Tabs.html

<ion-tabs id="app-tabs" class="tabs-icon-top">

  <ion-tab title="Coupons" icon-on="coupon-active" icon-off="coupon-inactive" href="#/tab/coupons">
    <ion-nav-view name="coupons-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Map" icon-on="map-active" icon-off="map-inactive" href="#/tab/map">
    <ion-nav-view name="map-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Favorites" icon-on="favorite-active" icon-off="favorite-inactive" href="#/tab/favorites">
    <ion-nav-view name="favorites-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Settings" icon-on="settings-active" icon-off="settings-inactive" href="#/tab/settings">
    <ion-nav-view name="settings-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

When clicking on an item in "#/coupons" the url I'm trying to go to is "#/singles/" followed by "#/coupon//" and I want singles and coupon (singular) to be part of the "Coupons" tab.

Would be nice to see an example of what exactly you want but if I'm interpreting right you could have something like:

tabs.html

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

  <ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" href="#/app/profile/{{currentUser.id}}">
      <ion-nav-view name="feed"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Friends" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/app/friends">
       <ion-nav-view name="friends"></ion-nav-view>
  </ion-tab>

</ion-tabs>

app.js

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/tabs.html",
  controller: 'AppCtrl'
})

.state('app.feed', {
  url: "/feed",
  views: {
    'feed' :{
      templateUrl: "templates/feed.html",
      controller: 'FeedCtrl'
    }
  }
})
.state('app.friends', {
      url: "/friends",
      views: {
        'friends' :{
          templateUrl: "templates/friends.html",
          controller: 'FriendsCtrl'
        }
      }
    })
.state('app.add-friends', {
      url: "/add-friends",
      views: {
        'friends' :{
          templateUrl: "templates/add-friends.html",
          controller: 'AddFriendsCtrl'
        }
      }
    })
.state('app.do-something', {
      url: "/do-something",
      views: {
        'friends' :{
          templateUrl: "templates/do-something.html",
          controller: 'DoSomethingCtrl'
        }
      }
    })

Note that there are three states for the friends tab, "app.friends", "app.add-friends", and "app.do-something". The key here is naming the views for each of these states 'friends', which corresponds to the tab's ion-nav-view name.