How to navigate in a separate view "stack"

Question

How to navigate in a separate view "stack"

I'm using ionic and I'm trying to set up my views to get started. For some reason, I can't figure out how to do the following:

http://codepen.io/anon/pen/NPVGee

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>
  <body ng-app="yaru">

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
  </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script id="views/other/layout.html" type="text/ng-template">
    <ion-nav-view name="other"></ion-nav-view></script>


    <script id="views/other/login.html" type="text/ng-template">
        <ion-view title="Home"> 
        <ion-content padding="true">
          <h2>Home Page</h2>
          <p>Here's the main route for the app.</p>
          <a href="" ui-sref="login">home</a>
          <a href="" ui-sref="todo.lists">todo lists</a>
    </ion-content></ion-view></script>



    <script id="views/todo/layout.html" type="text/ng-template">
    <ion-nav-view name="todo"></ion-nav-view>
    </script>


     <script id="views/todo/lists.html" type="text/ng-template">
        <ion-view title="Todo lists">
      <ion-content padding="true">
          <h2>lists</h2>
        </ion-content>

    </ion-view>
    </script>

  </body>
</html>
</html>


// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('yaru', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
      .state('todo', {
        url: "/todo",
        abstract: true,
        templateUrl: "views/todo/layout.html"
      })
      .state('todo.lists', {
        url: '/lists',
        views: {
          'todo': {
            templateUrl: 'views/todo/lists.html'
          }
        }        
      })
      .state('other', {
          url: "/other",
          abstract: true,
          templateUrl: "views/other/layout.html"
      })
      .state('other.login', {
          url: '/login',
          views: {
          'other': {
            templateUrl: 'views/other/login.html'
          }
        }  
      })
      ;

  $urlRouterProvider.otherwise('other/login');

});

Clicking on "todo lists" should open the todo.lists state without showing a back button and without a navigation animation.

My idea was that by using a separate ion-nav-view element, navigating to that state should open its own navigation history stack.

What's the recommended way to do this?

For example, in this example with tabs, clicking on a tab opens a new navigation stack without shown a back button to go back to another tab, that would be weird, I wonder how to do this in my codepen above http://codepen.io/ionic/pen/odqCz?editors=101

Thanks for helping out!

ionic-framework
ionic