Ng-repeat on Ion-Item in Ion-List won't reflect new information in array until page is refreshed

ionic-v1
1

Hi all,

To give a brief rundown of what I am working on:

This app is a phonebook that makes a call to our backend system and returns a JSON payload which is then parsed and stored to Local Storage for offline access and then the data is reflected in a simple homescreen format.

To give a simple workflow:

  1. User logs in
  2. Call to back-end via Ajax request is made under the user’s account
  3. Data is stored to local storage
  4. Data is added to $rootScope.allEmployeeInformation variable
  5. Ion-List reflects the data stored in the $rootScope.allEmployeeInformation variable on the home screen.

My issue lies here:

After logging in the data is pulled and stored properly but the Ion-List does not display the data until the page is refreshed either via the pull to refresh functionality I have implemented, the re-sync button or restarting the app.

Is there any way to ensure that these pieces of data are displayed without the user needing to refresh the page?

Would be more than happy to provide anymore information needed. Thank you for the help guys!

Edit, updating with some code as requested:

Code which performs the ajax request

Html which displays the information:

<ion-view> 
<ion-content class="scroll-content has-header animated fadeIn" ng-controller="HomeScreenController" padding="true">
<ion-refresher
pulling-text="Pull to resync...."
on-refresh="resyncEmployees(true)">
</ion-refresher>
<ion-list>
<ion-item
class="ion-item-content"
ng-repeat="employee in allEmployeeInformation | orderBy:'lastName'"
ng-controller="AccountCtrl"
ng-click="changeTabb(1, {{employee.identifier}})">
        
<div class="item-icon-left">
<i class="icon ion-person"></i>
<h3>{{employee.userCN}}</h3>
<h5>{{employee.title}}</h5>
<h6>{{employee.town}}</h6>
</div>
                        
<div class="item-icon-right">
<i class="icon ion-chevron-right icon-accessory"></i>
</div>
                    
</ion-item>
</ion-list> 
</ion-content>
</ion-view>

Essentially - the ion-list displayed the information stored in the array allEmployeeInformation and althought this information is stored in the variable, the ion-list will not accurately display the information until the page is refreshed, leaving us with a VERY bad UX… any tips? Thanks guys!

Cheers!
Mike

2

Toss a $timeout(function() {}); Around whatever is assigning to your $scope or $rootscope.
One, you should probably be using $http instead of $.ajax since $.ajax doesn’t trigger a digest cycle.
Two, since $.ajax doesn’t trigger a digest cycle the $timeout will do it for you, thus updating your UI.

Hope it works for you thumbs up