AngularJS - Scope variable not updating in view

Question

I have an AngularJS controller (HomeCtrl) that loads data from HTTP, if it detects that there has been some data in LocalStorage.

This check works on the entry of the controller.

var datOld = {
  APIDataService.getOldData($scope.searchTerms, totalPages, 1)
  .then(function(data) {
    console.log('Now getting data and applying it')
    $scope.records = data;
  }

I have $records in ng-repeat in view. It doesn't get updated. I have uploaded the entire project on Github for reference. https://github.com/kirobo/AngularApp

I tried to do $scope.apply() too, but it doesn't update either. I would be glad if someone can point out what the error is or if something I am doing wrong.

Answer 1

Declare your scope variable like this

$scope.data = {};
$scope.data.records = null;

then when you fetch

APIDataService.getOldData($scope.searchTerms, totalPages,1).then(function(data) {
 console.log('Now getting data and applying it')
 $scope.data.recods = data;
}

And use $scope.data.records in html. Will work like a charm