Ionic-back-button not showing up, might be states are wrong?

I am building an app using ionic(1.0b5) and cordova. I am having trouble having the back button showing up when the state changes to different screens via clicking on entries in the menu.

I have followed this http://ionicframework.com/docs/api/directive/ionNavBackButton/ with a side menu pushed over to the right. I have searched around and all the solutions I have tried are not working so I think it may be my states are not configured properly to allow the back button to show up. Copied below:

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'MenuCtrl'
    })

    .state('app.markets', {
      url: '/markets',
      views: {
        'menuContent': {
          templateUrl: 'templates/markets.html',
          controller: 'MarketsCtrl'
        }
      }
    })
    .state('app.main', {
      url: '/main',
      views: {
        'menuContent': {
          templateUrl: 'templates/main.html',
          controller: 'MainCtrl'
        }
      }
    })

    .state('app.account', {
      url: '/account',
      views: {
        'menuContent': {
          templateUrl: 'templates/account.html',
          controller: 'AccountCtrl'
        }
      }
    })

    .state('app.notifications', {
          url: '/notifications',
          views: {
              'menuContent': {
                  templateUrl: 'templates/notifications.html',
                  controller: 'NotificationsCtrl'
              }
          }
      })

      .state('app.share', {
          url: '/share',
          views: {
              'menuContent': {
                  templateUrl: 'templates/share.html',
                  controller: 'ShareCtrl'
              }
          }
      })

  $urlRouterProvider.otherwise('/app/main');

});

This is my index page:

  <body ng-app="sqb" animation="slide-left-right-ios7">
  <ion-nav-bar class="nav-title-slide-ios7" type="bar-default" back-button-type="button-icon"
               back-button-icon="icon ion-arrow-left-c">
      <ion-nav-buttons side="left">
          <ion-nav-back-button class="button-icon ion-arrow-left-c">
          </ion-nav-back-button>
      </ion-nav-buttons>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
  </body>

If I use:

$state.transitionTo("app.main");

The back button appears but not if I use the links in menu. Any ideas?

Have you tested if the links in menus have the "nav-clear" property? Probably your buttons have it.

Have you tried not to nest it into ion-nav-buttons but put it into ion-nav-bar directly?

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