How to properly structure/update directives with data from service in angularjs? - angularjs

Question

On first load, I want an application to retrieve data asynchronously on first load from X number of http requests (X is based on the number of elements in fruits), and update a directive that shows how many items have been retrieved. When all items are retrieved, an event is triggered to cause that directive/dom element is hide itself.
What is the best way to accomplish this with angular? the following is what I think in terms of what the responsibilities of the service, controller, and directive are. Is this right? Or should there be a different/better way to do this?
APP.service('myService', function($http) {
this.fruits = ['Apple', 'Bannana', 'Pear', 'Orange'];
this.processedFruit = [];
});
APP.controller('myController', ['$scope', '$http', 'myService', function($scope,$http) {
$scope.$emit('LOAD');
// Should the following be in the service instead of the controller?
for(var i = 0; i < myService.fruits; i++) {
$http.get('someurl/'+fruits[i]).success(function(response) {
myService.processedFruit.push(response);
// Somehow tell the "statusofloading" directive to update its (Completed $http Requests)?
});
}
// Once all requests are finished $scope.$emit('UNLOAD') somehow to the directive?;
}]);
APP.directive('statusofloading', function() {
return {
scope:true,
restrict:'E',
link: function($scope,e,a) {
//Completed $http Requests
$scope.completeRequests = 0;
// Total $http Requests
$scope.totalRequests = // Get the number from the service somehow from (length of this.fruits);
$scope.$on('LOAD', function(){$scope.loading=true});
$scope.$on('UNLOAD', function(){$scope.loading=false});
},
replace: true,
template:"<h1>({{completedRequests}}) / ({{totalRequests}}) </h1>"
}
})

Answer 1

$emit takes a second parameter where you can pass whatever you want.
$scope.$emit('LOAD',{totalRequests: myService.fruits});
Then in your directive:
$scope.$on('LOAD', function(args){
$scope.loading=true;
$scope.totalRequests = args.totalRequests;
});
Then you tell the directive when a request is completed and it knows when all are done and it needs to hide itself. Make sure to notify the directive of failed requests as well as successful ones.
Also take a look at angular-busy for another more generic approach to the problem.