Angular routing issue - ionic header not updated in tab

Question

Have begun the hockey stick learning curve of angular and ionic and following along on a Linda course. I made some type of routing mistake (most likely a typo) and are stuck..

The problem is that my header don't update for the calendar tab, it just uses the last header.

app.js

//... angluar.module('starter', ['ionic']) ... .run(..) ...

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('tabs', {
      url: '/tab',
      abstract: true,
      templateUrl: 'templates/tabs.html'
    })

  .state('tabs.home', {
    url: '/home',
    views: {
      'home-tab': {
        templateUrl: 'templates/home.html'
      }
    }
  })

  .state('tabs.list', {
      url: '/list',
      views: {
        'list-tab': {
          templateUrl: 'templates/list.html',
          controller: 'ListController'
        }
      }
    })
      .state('tabs.detail', {
        url: '/list/:aId',
        views: {
          'list-tab': {
            templateUrl: 'templates/detail.html',
            controller: 'ListController'
          }
        }
      })

    .state('tabs.calendar', {
      url: '/calendar',
      views: {
        'calendar-tab': {
          templateUrl: 'templates/calendar.html',
          controller: 'CalendarController'
        }
      }
    })

  ;

  $urlRouterProvider.otherwise('/tab/home');
})

// ... controllers ...

tabs.html

<ion-tabs class="tabs-icon-top tabs-positive">

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Artist" icon="ion-ios-people" href="#/tab/list">
    <ion-nav-view name="list-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Calendar" icon='ion-calendar' href="#/tab/calendar">
    <ionic-nav-view name="calendar-tab"></ionic-nav-view>
  </ion-tab>

</ion-tabs>

calendar.html

<ion-view view-title="Calendar">
  <ion-content class="has-subheader">
    <!--SEARCH ELEMENT-->
    <div class="bar bar-subheader
          item-input-inset bar-light">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" ng-model="query" placeholder="Search">
      </label>
    </div>
  </ion-content>
</ion-view>

Any help will be highly appreciated.

Answer 1

Typo in your HTML

it should be ion-nav-view instead of ionic-nav-view

<ion-nav-view name="calendar-tab"></ion-nav-view>

instead of

<ionic-nav-view name="calendar-tab"></ionic-nav-view>