Ion-view title from model does not appear when going to route, title appears when reloading

I am trying to set the title of an ion-view from a model property, however it does not appear when I navigate from a previous page to the current page. If I reload the page in the browser, the title will get set from the model, but not when navigating.

Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.7.6
Ionic App Lib Version: 0.6.2
ios-deploy version: 1.8.2
ios-sim version: 5.0.2
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.0.1 Build version 7A1001

Controllers:

.controller('FactionsCtrl', function($scope, Faction) {
  $scope.factions = Faction.all();
})

.controller('FactionCtrl', function($scope, $stateParams, $view, Faction) {
  $scope.faction = Faction.get({id: $stateParams.factionId, full: true});
});

factions.html:

<ion-view view-title="Factions">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="faction in factions" href="#/app/factions/{{faction.id}}">
        {{faction.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

The item view lists cards for a specific faction, this works regularly when navigating to the page by clicking from the parent view, factions.html. It’s just the title that doesn’t appear to work unless I reload the page.

faction.html:

<ion-view view-title="{{faction.name}}">
  <ion-content>
    <ion-list>
      <ion-checkbox
          ng-repeat="card in faction.cards"
          ng-model="card.owned"
          ng-checked="card.owned"
          ng-class="{'starter': card.starter}"
          href="#/app/card/{{card.id}}">
        {{card.name}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

If I reload the route that’s showing a specific faction (and it’s underlying cards) the title appears.

Thank you for taking your time to read this and hopefully come up with a solution!

Original gist snippet with slightly more information:

1 Like

Had the same problem. Found a solution that worked for me in another thread.

Use ion-nav-title tag instead of view-title attribute…

For example:

    <ion-view>
      <ion-nav-title>{{data.title}}</ion-nav-title>
      <ion-content>
          ...
1 Like