Angularjs data is null from async service in scope - angularjs

Question

thanks in advance for read my post.
I have a service, like this:
angular.module('myApp.services')
.factory('myService', function($http, $q) {
var myService = {
getId: function() {
var defer = $q.defer();
$http.get('http://xxxxxxxxxxxxxxxxxx/id/')
.success( function(data) {
defer.resolve(data);
})
.error( function(data) {
defer.reject(data);
});
return defer.promise;
},
begin : function(jsonBegin) {
var defer = $q.defer();
$http.post('http://xxxxxxxxxxxxxxxxxxxxxxx/begin/?format=json', jsonBegin)
.success( function(data) {
defer.resolve(data);
})
.error( function(data) {
defer.reject(data);
});
return defer.promise;
}
};
return myService;
});
A parent controller (works fine):
angular.module('myApp.controllers')
.controller('controllerA', function($scope, myService) {
myService.getId()
.then(function(data) {
$scope.bID = data.bID;
});
});
And child controller:
angular.module('myApp.controllers')
.controller('controllerB', function($scope) {
console.log($scope.$parent.bID);
});
The console.log value for bID is undefined, do u know why? I am setting that variable in the parent controller trough myService service. I guess my problem is due to the asynchronous call but I'm not sure.
Thanks.

Answer 1

You could do something like this:
angular.module('myApp.controllers')
.controller('controllerA', function($scope, myService) {
$scope.bID = myService.getId()
.then(function(data) {
return data.bID;
});
});
angular.module('myApp.controllers')
.controller('controllerB', function($scope) {
$scope.$parent.bID.then(function(bID) { console.log(bID); });
});
The child scope will wait for the parent to resolve bID. And when parent bID is already resolved, it will immediately return the value in the child scope promise. It's a little messy looking though.
The alternative is to have the myService request resolve before the controller loads. Check this out:
http://www.codelord.net/2015/06/02/angularjs-pitfalls-using-ui-routers-resolve/
Then you can set the parent scope to the resolved value and access it as a normal property in the child scope.

Answer 2

The problem is that the console.log code is excuted when the controller is initialized, in that time the response do't arrive with the results on the parent controller.
Try to put this code on your test controller.
angular.module('myApp.controllers')
.controller('controllerB', function($scope, $timeout) {
// waith 1second for the server response on the parent controller
$timeout(function(){
console.log($scope.$parent.bID);
}, 1000);
});
FYI. This work console.log($scope.bID) check scope inheritance.