# Mutiple views in one tab

**URL:** <https://forum.ionicframework.com/t/mutiple-views-in-one-tab/40193>\
**Category:** ionic-v1\
**Created:** [December 30, 2015, 9:30pm UTC](https://forum.ionicframework.com/t/mutiple-views-in-one-tab/40193 "2015-12-30T21:30:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sebbizeul](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sebbizeul/32/94987_2.png) [@sebbizeul](https://forum.ionicframework.com/u/sebbizeul)\
**Post date:** [December 30, 2015, 9:30pm UTC](https://forum.ionicframework.com/t/mutiple-views-in-one-tab/40193/1 "2015-12-30T21:30:24Z")

</div>

Hi everyone,  
Here is a simple example of what I’m trying to do.  
I have 2 tabs (Home and News) and 3 views (Home, News and Details).  
When I click on the Home and News tabs, it displays respectively the Home and News pages.  
Here is my routing file:

```
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
	.state('tabs', {
		url: '/tabs',
		abstract: true,
		templateUrl: 'templates/tabs.html',
	})
		.state('tabs.home', {
			url: '/home',
			views: {
				'home-tab': {
					templateUrl: 'templates/home.html',
					controller: 'HomeCtrl'
				}
			}
		})
		.state('tabs.news', {
			url: '/news',
			views: {
				'news-tab': {
					templateUrl: 'templates/news.html',
					controller: 'NewsCtrl'
				}
			}
		})
		.state('tabs.details', {
			url: '/details',
			views: {
				'details-tab': {
					templateUrl: 'templates/details.html',
					controller: 'DetailsCtrl'
				}
			}
		})
$urlRouterProvider.otherwise('/tabs/home');			

```

});

And here is my tabs view:

```
<ion-tabs class="tabs-icon-top tabs-positive ">
	<ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
		<ion-nav-view name="home-tab"></ion-nav-view>	
	</ion-tab>	
	<ion-tab title="News" icon="ion-social-reddit" ui-sref="tabs.news">
		<ion-nav-view name="news-tab"></ion-nav-view>	
	</ion-tab>	
</ion-tabs>

```

I think it’s OK…  
Now I want to go to the Details page from the News page. So i added a button in the News page like this:

```
<ion-view view-title="News">
	<ion-content class="padding content-stable">
		<button class="button button-positive" ui-sref="tabs.details">Go to Details</button>
	</ion-content>	
</ion-view>

```

When I click on the button, I’m still on the same page and my view remains the same. It’s weird… However, the URL in my browser has changed to

[http://localhost:8101/#/tabs/details](http://localhost:8101/#/tabs/details)

which proves that the state has changed. I probably missed one thing … but what???

---

<div class="post-metadata">

**Author:** ![sebbizeul](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sebbizeul/32/94987_2.png) [@sebbizeul](https://forum.ionicframework.com/u/sebbizeul)\
**Post date:** [December 30, 2015, 10:41pm UTC](https://forum.ionicframework.com/t/mutiple-views-in-one-tab/40193/2 "2015-12-30T22:41:29Z")

</div>

I found the answer to my own question!  
It’s a routing mistake…  
To do this, the tabs.details state must have the same view name as the parent tab.

```
.state('tabs.news', {
    url: '/news',
    views: {
        'news-tab': {
            templateUrl: 'templates/news.html',
            controller: 'NewsCtrl'
        }
    }
})
.state('tabs.details', {
    url: '/details',
    views: {
        'news-tab': { // SAME VIEW NAME!!! 
            templateUrl: 'templates/details.html',
            controller: 'DetailsCtrl'
        }
    }
})
```