Missing title when switching views in beta14

Codepen here:

Open the side menu and select “Decepticons”. The title of that view is supposed to be “Decepticons”, but the first time you go there, it is blank. Switching back to the view later shows the title correctly; just seems to be a problem the first time the view is shown.

Could this possibly be due to the title being set via a “view-title” attribute and not using beta14’s new <ion-nav-title>?

Hmm, I don’t think so, if you navigate around, the title does show up.

I think it may have to do with how you are loading the data.

I am using a promise to load the data in the $ionicView.beforeEnter handler, so I guess there could be a timing issue where Ionic locks the title before the data can be loaded. Strange that it only happens on first load.

I’ll try a $scope.$apply() to see if that does the trick.

Bummer. Placing a $scope.$apply() just after the data is loaded doesn’t seem to have done the trick. Anyone have any ideas?

Example: http://codepen.io/revie/pen/qExXKw/

Looks like this is a problem with running the latest Ionic too:

But isn’t a problem with older versions of Ionic, such as beta13:

Anyone else running into the same problems?

As @mhartington suggested, I think this is a problem with the data loading too, but not with how I’m loading the data. Instead, my guess is that this is a timing issue in how Ionic is setting the scope variable watchers for the template, and the data is getting loaded too fast for Ionic to handle the change.

I’ve opened an issue here to track the problem:

Turns out I was wrong. Turns out the problem was with the definition of scope variables. I was using “$ionicView.loaded” to initialize my scope variables, but ran into a timing issue with Ionic where the watchers on the scope variables were being set before “$ionicView.loaded” was being called when the view was first loaded, which caused Ionic to skip over the variable that sets the title.

For those that may run into the same problem, the solution is to just declare your scope variables on controller initialization, outside of “$ionicView.loaded”, like:

.controller('MyCtrl', function($scope, $stateParams, ContactService) {
   $scope.contact = null;

   $scope.$on('$ionicView.beforeEnter', function() {
      if (!$scope.contact || $scope.contact.id != $stateParams.contactId) {
         ContactService.findById($stateParams.contactId).then(function(data) {
            $scope.contact = data;
         });
      }
   });
});

Codepen: http://codepen.io/revie/pen/YPaZKJ