Bad timing or order of functions with resolves on

Question

I have an app where my main state makes a resolve makes an http call and fetches an array.

Then, the child array is supposed to display one object from this array, but it seems that the variables from the controller are defined too early and don't get updated properly, so the child comes out empty.

I've tried it without http call (var array = [array]), and it works fine, but not with the http call.

Any tips on how to fix this?

Here's the controllers:

.controller('appCtrl',['$scope', 'SearchService','fair', function($scope, SearchService, fair){

  $scope.data = SearchService;
  $scope.datafairs = $scope.data.flatexhibitors;
  console.log($scope.datafairs);
}])

.controller('ChildController',['$scope', 'exhibitor', '$filter', function($scope, exhibitor, $filter){

  $scope.$watch(function() { return $scope.fair; }, function(newVal) { 
    $scope.fairs = newVal;
    console.log($scope.fairs);
    $scope.chosenexhibitor = $filter("filter")($scope.fairs, {'slug':exhibitor}, true);
  }, true);


}])

The service:

.factory("SearchService", function($http) {  

  var service = {
    flatexhibitors : [],
    datafairs : [],
    getAllExhibitors : function (wop) {
      var searchindex = wop;
        console.log(searchindex);
        var url = '../register/backend/databaseconnect/getexhibitors.php';
        var config = {
            params: {
                search: searchindex
            },
            cache:true
        };
        $http.get(url, config).then(function (data) {
          service.datafairs = data.data.rows;
          for (var i in service.datafairs) {
            service.flatexhibitors.push(service.datafairs[i].doc);
          };
          return service.flatexhibitors;
        });
    }   
  }
  return service;

})

And the states:

.config(function($stateProvider) {


  $stateProvider.state('berliner', {
    url: '/berlinerliste',
    params : {search: 'Berliner 2017'},
    resolve: {
      fair: function(SearchService, $stateParams) {
        return SearchService.getAllExhibitors($stateParams.search);
      }
    },
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'main':{    
        templateUrl: 'bl2017.htm',
        controller: 'appCtrl'
      }    
    }
  })

  .state('berliner.exhibitor', {
    url: '/{id}', 
    resolve: {
      exhibitor: function($stateParams) {
        var slug = $stateParams.id;
        return slug;
      }
    },
    views: {
      'header': {   
        templateUrl: 'header.htm'   
      },
      'wop':{    
        templateUrl: 'exhibitor.htm',
        controller: 'ChildController'
      }    
    }
  })

})

I've managed to replicate the issue in a Plunkr.

Answer 1

Change the getAllExhibitors to return a promise like below:

getAllExhibitors : function (wop) {
  var searchindex = wop;
    console.log(searchindex);
    var url = '../register/backend/databaseconnect/getexhibitors.php';
    var config = {
        params: {
            search: searchindex
        },
        cache:true
    };
    return $http.get(url, config).then(function (data) {
      service.datafairs = data.data.rows;
      for (var i in service.datafairs) {
        service.flatexhibitors.push(service.datafairs[i].doc);
      };
      return service.flatexhibitors;
    });
}