How to process data in controller once received in angularjs? - angularjs

Question

Assume I have a directive that contains a form where a user can enter in the name of a fruit.
I have a FruitFindController. User enters fruit name, "Apple", clicks a button which submits to controller.
Controller calls a service "GetFruitInfo(fruit)" and passes in "Apple" as parameter.
Once the information is received, it should call a method "addToListAndDoStuff()" in order to add the fruitinfo to the list.
My issue is, in my FruitFindController (assume fruitFinder is the service)...
$scope.GetFruitInfo = function() {
$scope.foundFruit = fruitFinder.GetFruitInfo($scope.fruitField);
// should alert "Found Fruit" and call addToListAndDoStuff() method to add the foundFruit information to the list managed by another directive, "FruitList".
}
What is the best way to "wait for the information is stored into $scope.foundFruit before doing any code below and popping up the alert box?

Answer 1

The best way is to use a promise. In your fruitFinder service, the GetFruitInfo method would look something like this..
function GetFruitInfo(fruit) {
var delay = $q.defer();
$http({method: 'GET', url: 'http://myapi.com/getFruitInfo?fruit=' + fruit}).
success(function(data, status, headers, config) {
delay.resolve(data);
}).
error(function(data, status, headers, config) {
delay.reject(data);
});
return delay.promise;
}
This method returns a promise object that you can wait for it to resolve in your controller using the .then() method, like this..
$scope.GetFruitInfo = function() {
$scope.foundFruit = fruitFinder.GetFruitInfo($scope.fruitField).then(function(response) {
alert('Found Fruit');
addToListAndDoStuff(response);
});
}