How to retrieve data via asynchronous call

Question

I am trying to use promise and service to set the data from http request.

I have something like this

angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        testService.getProducts().then(function(products){
           console.log(products);
        })
        //getFirstProduct is trigger by ng-click user action.
        $scope.getFirstProduct = function(){
            var t = testService.getFirstProduct();
            console.log(t);
         }
    }
]);

angular.module('myApp').service('testService', ['Product', '$q',
function(Product, $q) {
    var products, firstProduct;

    var getFirstProduct = function(){
        return firstProduct;
    }

    var setFirstProduct = function(product) {
        firstProduct = product;
    }

    var getProducts = function() {
        var deferred = $q.defer();
        //Product is a $resource object to send an http request
        Product.query({
            id: 123
        }, function(result) {
            setFirstProduct(result.first);
              deferred.resolve(classes); 
        });
        return deferred.promise;
    }

    return {
        setFirstProduct: setFirstProduct,
        getProducts: getProducts,
        getFirstProduct: getFirstProduct
    };
}
]);

I need to be able to get First product but I am not sure how to fix this. Can anyone help me about it? Thanks a lot

Answer 1

I see a number of errors in the code such as missing semicolons, mistyped variable/function names, and that setProducts was clobbering its variable. Also, added $q, as mentioned by @manube

The following should work better:

angular.module('myApp').controller('productController', ['$scope', 'testService',
    function($scope, testService) {
        testService.getProducts().then(function(products){
           console.log(products);
        })
        //getFirstProduct is trigger by ng-click user action.
        $scope.getFirstProduct = function(){
            var t = testService.getFirstProduct();
            console.log(t);
         }
    }
]);

angular.module('myApp').service('testService', ['Product', '$q',
function(Product, $q) {
    var products, firstProduct;

    var getFirstProduct = function(){
        return firstProduct;
    }

    var setFirstProduct = function(product) {
        firstProduct = product;
    }

    var getProducts = function() {
        var deferred = $q.defer();
        //Product is a $resource object to send an http request
        Product.query({
            id: 123
        }, function(result) {
            setFirstProduct(result.first);
              deferred.resolve(classes); 
        });
        return deferred.promise;
    }

    return {
        setFirstProduct: setFirstProduct,
        getProducts: getProducts,
        getFirstProduct: getFirstProduct
    };
}
]);