# How to navigate to a new screen from a tab screen

**URL:** <https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674>\
**Category:** ionic-v1\
**Created:** [March 17, 2016, 5:07am UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674 "2016-03-17T05:07:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nirman99](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@nirman99](https://forum.ionicframework.com/u/nirman99)\
**Post date:** [March 17, 2016, 5:07am UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/1 "2016-03-17T05:07:59Z")

</div>

Hi All,  
I want to achieve something like this.  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/b/f/bf66bd7ec7b5afbb9ac022c86229c0caed764d46.png)  
I want to navigate to a new screen (I dont want tabs in this screen) from a tab screen. So I did something like this in

```
app.js

.state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.state('tab.ticket', {
    url: '/ticket',
    views: {
      'tab-ticket': {
        templateUrl: 'templates/tab-ticket.html',
        controller: 'TicketCtrl'
      }
    }
  })
.state('tab.intel', {
      url: '/intel',
      views: {
        'tab-intel': {
          templateUrl: 'templates/tab-intel.html',
          controller: 'IntelCtrl'
        }
      }
    })
.state('ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- Chats Tab -->
  <ion-tab title="Tickets" icon="ion-ios-photos" href="#/tab/ticket">
    <ion-nav-view name="tab-tickets"></ion-nav-view>
  </ion-tab>

  <!-- Intel Tab -->
  <ion-tab title="Intel" icon="ion-person-stalker" href="#/tab/intel">
    <ion-nav-view name="tab-intel"></ion-nav-view>
  </ion-tab>
</ion-tabs>

tab-ticket.html

<ion-view view-title="Tickets">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="ticket in tickets" type="item-text-wrap" href="#/ticketDetail/{{ticket.id}}">
        <p>{{ticket.ticketId}}</p>
        <p>{{ticket.type}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

ticket-detail.html

<ion-view view-title="{{ticket.ticketId}}">
  <ion-content class="padding">
    <p>
      {{ticket.type}}
    </p>
  </ion-content>
</ion-view>

```

I can navigate to ‘ticketDetail’ from ‘tab.ticket’. But the issue is screen transition happens without an animation and no back button not appearing. Any ideas?

---

<div class="post-metadata">

**Author:** ![ohiageorge](https://avatars.discourse-cdn.com/v4/letter/o/ba8739/32.png) [@ohiageorge](https://forum.ionicframework.com/u/ohiageorge)\
**Post date:** [March 17, 2016, 9:24am UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/2 "2016-03-17T09:24:34Z")

</div>

have you tried this ?  
$ionicHistory.nextViewOptions({  
disableBack: false  
});

you can put the code above in TicketDetailController but before you do that, ensure you inject $ionicHistory as a dependency in the controller

---

<div class="post-metadata">

**Author:** ![nirman99](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@nirman99](https://forum.ionicframework.com/u/nirman99)\
**Post date:** [March 17, 2016, 1:17pm UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/3 "2016-03-17T13:17:38Z")

</div>

In TicketCtrl I used below code to go to details screen.

```
$scope.goNext = function(selId){
          $ionicHistory.nextViewOptions({
            disableAnimate: false,
            disableBack: false
          });
          $state.go('ticketDetail', {ticketId: selId});
        };

```

But still animation not working and no back button. ☹ Is it because it is a new navigation stack?

Animation and back button works fine when navigating inside the tab (example given in [http://codepen.io/ionic/pen/odqCz](http://codepen.io/ionic/pen/odqCz)).

---

<div class="post-metadata">

**Author:** ![ohiageorge](https://avatars.discourse-cdn.com/v4/letter/o/ba8739/32.png) [@ohiageorge](https://forum.ionicframework.com/u/ohiageorge)\
**Post date:** [March 17, 2016, 2:31pm UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/4 "2016-03-17T14:31:04Z")

</div>

```
.state('ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

```

Replace above with

```
.state('tab.ticketDetail', {
      url: "/ticketDetail/:ticketId",
      templateUrl: "templates/ticket-detail.html",
      controller: "TicketDetailController"
    });

```

Note the `tab.`

`$state.go('ticketDetail', {ticketId: selId});`  
should be  
`$state.go('tab.ticketDetail', {ticketId: selId});`

---

<div class="post-metadata">

**Author:** ![nirman99](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@nirman99](https://forum.ionicframework.com/u/nirman99)\
**Post date:** [March 21, 2016, 5:29am UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/5 "2016-03-21T05:29:40Z")

</div>

@ohiageorge  
That would open a new screen inside tab screen. But I want the new screen to be opened without tabs.

---

<div class="post-metadata">

**Author:** ![nirman99](https://avatars.discourse-cdn.com/v4/letter/n/f19dbf/32.png) [@nirman99](https://forum.ionicframework.com/u/nirman99)\
**Post date:** [March 28, 2016, 2:56pm UTC](https://forum.ionicframework.com/t/how-to-navigate-to-a-new-screen-from-a-tab-screen/46674/6 "2016-03-28T14:56:33Z")

</div>

I think this is related to

> <https://github.com/ionic-team/ionic/issues/2997>

Anyone knows a solution?