Ion-nav-back-button display none when navigate to new page?

i’m new to ionic framework, i’m not quite understand how ion-nav-button directive works.

my state config like this;
$stateProvider

// setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:
.state('tab.home', {
    url: '/home',
    views: {
        'tab-home': {
            templateUrl: 'templates/tab-home.html',
            controller: 'HomeCtrl'
        }
    }
})
    .state('mapdetail', {
        url: '/map/detail',
        templateUrl: 'templates/map-detail.html',
        controller: 'MapDetailCtrl'
    });

i have 3 tabs, the main tab has some items which will navigate to mapdetail page. the item html is

        <div class="item item-image" ng-click="goMapDetail()">
            <img src="mock/bkg1.jpg">

            <div class="title">
              my map
            </div>
            <div class="user-info">
                <img src="mock/avatar.jpg" alt="user1" class="avatar">
                <span class="user-name">user1</span>
            </div>

        </div>

the goMapDetail is

.controller('HomeCtrl', function($scope, $state) {
    $scope.goMapDetail = function() {
        $state.go('mapdetail');
    };
})

i use ion-nav-back-button to show history go back button.

  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar> 
  <ion-nav-view></ion-nav-view>

but when i click each item, it navigator to mapdetail page, the url change from tab/home to map/detail.
but the ion-nav-back-button didn’t show, it display none in css style.

how could i let the ion-nav-back-button show?

Can anyone explain how did ion-nav-back-button decide when to show? Didn’t show when history.state change?

I have the same issue, and I’m also a new guy.

I have the same issue…

Same issue. No one found a solution for this ?