Ng-Repeat not updating until page is refreshed

Question

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>

Edit #2: I believe I've narrowed to down to infact being an issue with ng-repeat and not Ion-List as I expected at first glance. Updating the reference tags.

Cheers! Mike

Answer 1

Pretty easy - you're using jQuery's $.ajax and that doesn't trigger a digest cycle. Digest cycles are what tell Angular to update and 2 way bind essentially (dumbed down). Use the provided Angular $http module.

$http.get(agent).then(function(response) {

});

Also, you're calling location.reload() at the end of your code - which will get rid of any client changes you've made so far. You probably don't need that.