AngularJS / Ionic Header Not Binding Correctly When First Viewed

Question

I have a simple Angular/Ionic View that I am binding a model to. Below is an example of the controller:

.controller('LocationDetailsCtrl',function($scope,$http,$stateParams,$local    storage,$log,Locations){

   var locationId = $stateParams.locationId;

   Locations.setCurrent(locationId);

   var model = {
       location:null
   };

   Locations.getById(locationId)
     .then(function(location){
       $scope.model.location = location;
     },function(error){
       $log.error(error);
   });

   $scope.model = model;
}

I am being the property $scope.model.location.name to the header title on the view.

This looks like the following

<ion-view view-title="{{model.location.name}}">
   <ion-content>

   ... other model binding stuff here works fine

   </ion-content>
</ion-view>

The problem I am running into is that when the view loads the first time, everything loads fine except the header binding. Then I can go to another view, and come back to this iew and the title is bound correctly the model on my scope.

Here are screenshots

First time the view loads..

After I navigate to another view and come back

Not sure why it wouldn't bind the first time when all the other $scope.model.location.XXXX properties bind correctly and update in the view.

On which element , you have define ng-controller ? – Bhushankumar Lilapara Oct 03 '15 at 19:29 — Bhushankumar Lilapara, Oct 03 '15 at 19:29
Anyway can you replicate this in a simplified codepen? – Bhushankumar Lilapara Oct 03 '15 at 19:32 — Bhushankumar Lilapara, Oct 03 '15 at 19:32

score 0 · Answer 1 · answered Nov 25 '16 at 10:27

0

Use

if (!$scope.$$phase) $scope.$apply()

after you after

$scope.model.location = location;

answered Nov 25 '16 at 10:27

Mandeep Singh

857
8
13

AngularJS / Ionic Header Not Binding Correctly When First Viewed

1 Answers1