AngularJS AppCtrl is waiting for a successful HTTP event

Question

I'm all new to AngularJS and need some help, I have "AppCtrl", and from there I have an HTTP service service - and you need an answer to the webservice call available in my other controllers.

angular.module('starter.controllers', []) .controller('AppCtrl', function($scope, $http) { $scope.webservice_url = "http://webserviceurl.com/"; $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { $scope.stations = data.stations; }); }) 

This works FINE - and I can access the $ scope.stations objects in my templates - BUT now I want to access the $ scope.stations objects in my PlaylistCtrl controller, but this is undefined :(

 .controller('PlaylistCtrl', function($scope, $stateParams) { console.log($scope.stations); // is undefined :( }) 

How can I make sure the http call is "made" (success) before loading "PlaylistCtrl" ...

Answer 1

you should include http in the / factory service if possible

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, dataService) { dataService.then(function (data) { $scope.data = data }) }); app.controller('SecondCtrl', function($scope, dataService) { dataService.then(function (data) { $scope.secData = data }) }); app.service('dataService', function ($http, $q){ var defferer = $q.defer() $http.jsonp('http://ip.jsontest.com/?callback=JSON_CALLBACK').success(function (data){ defferer.resolve(data) }) return defferer.promise }) 

http://plnkr.co/edit/8k97DngZ8KoFOBPFJG82?p=preview working example

Answer 2

$scope.stations ist is not undefined in PlayListCtrl because the HTTP call has not yet completed, but since PlayListCtrl has a different $scope than AppCtrl .

You must place the webservice call in the service and implement this service in all the controllers that require it.

Answer 3

In Angular, you do not wait for data before rendering. You allow rendering, even if the array is empty first, and then, as soon as the data returns, you will render again. Angular does this to maintain a high level of responsiveness. This is by design, not what you should try to change.

All you need to do to fix your undefined variable is initializing the scope stations variable in your controller. Although it is overwritten when data is returned from your service, it does not matter, since Angular will keep track of changes in the scope variable by reference and will update all views when that happens.

 angular.module('starter.controllers', []) .controller('AppCtrl', function($scope, $http) { $scope.webservice_url = "http://webserviceurl.com/"; $scope.stations = []; $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) { $scope.stations = data.stations; }); }) 

In your internal controller, if the data has not returned yet, $ scope.stations will be an empty array:

 .controller('PlaylistCtrl', function($scope, $stateParams) { console.log($scope.stations); // is [] $scope.$watch('stations', function(newVal) { alert('data returned!! updating views!'); }); }) 

As soon as the data is returned, the array reference in the area will be overwritten, any $ watch handler is called to update the view.

Answer 4

 // Make a remote request. $http.get('some wonderful URL for a service').success(function (results) { superImportantInfo = results; semaphore = true; }); while (!semaphore) { // We're just waiting. } 

So you can let your controller wait until the completion of controller 1 and before moving on to the next controller.

Hope this help!