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;

// 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 class="user-info">
                <img src="mock/avatar.jpg" alt="user1" class="avatar">
                <span class="user-name">user1</span>


the goMapDetail is

.controller('HomeCtrl', function($scope, $state) {
    $scope.goMapDetail = function() {

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

  <ion-nav-bar class="bar-stable">

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 ?