Upon receiving data from a remote request via companiesData.getCompanies(), I store it in a variable within the controller.
The issue arises when the controller proceeds without waiting for the promise to be resolved, resulting in an empty response array.
JS controller :
angular.module('X.Exh', [])
.controller('ExhibitorsController', function($scope, $state, $stateParams, companiesData) {
this.companies = [];
companiesData.getCompanies().then(function(response) {
this.companies = response.data;
console.log(this.companies); // functioning properly
});
});
HTML:
<ion-alpha-scroll ng-model="Exh.companies" key="name" display-key="name" subheader="true" use-complete-alphabet="true">
<!-- The ion alpha scroll essentially performs an ng-repeat for each item, with no issues arising here -->
As the HTTP request is not waited upon, Exh.companies remains empty. (Note that if I omit this.companies = []; at the beginning of my controller, my HTML reports that Exh.companies is undefined.)
What is the appropriate method to fetch and handle the data effectively?