$http post via an angularjs service

Question

I use the code below. The content of dataService is all the $http possible in my application. In the controller, I consume this function. The function call a Web Api service, this one is called and return the right response. In the function customerToggleSuccess the data is undefined . I don't understand why.

(function () {
    angular.module('myApp')
        .factory('dataService', ['$q', '$http']);

    function dataService($q, $http,) {

        return {
            customerToggleActive: customerToggleActive
        };

        function customerToggleActive(customerId, index) {

            var customer = {
                "id": customerId,
                "index": index
            };

            return $http({
                method: 'POST',
                url: 'api/customer/validtoggle/',
                headers: {
                },
                transformResponse: function (data, headers) {
                },
                data: customer
            })
            .then(customerToggleData)
            .catch(customerToggleError)
        }

        function customerToggleData(response) {
            return response.data;
        }

        function customerToggleError(response) {
        }
    }

}());

(function () {

    angular.module('myApp')
        .controller('customerController', ['$scope', 'dataService', '$http', '$log', CustomerController]);

    function CustomerController($scope, dataService, $http, , $log) {
        var vm = this;

        vm.activeToggle = function (customerId, index) {

            dataService.customerToggleActive(customerId, index)
                .then(customerToggleSuccess)
                .catch(customerToggleCatch)
                .finally(customerToggleComplete);

            function customerToggleSuccess(data) {
                $log.info(data);
            }

            function customerToggleCatch(errorMsg) {
            }

            function customerToggleComplete() {
            }

        } 

    }

}());

Answer 1

Simply return the $http promise,

  return $http({
             method: 'POST',
             url: 'api/customer/validtoggle/',
             headers: {
             },
             transformResponse: function (data, headers) {
             },
             data: customer
         })

you can access it by,

dataService.customerToggleActive(customerId, index)
      .then(function (response) {
             // do your stuff
      })

or, you can do,

function dataService($q, $http,) { 
    var defer = $q.defer();
    ....
    ....
    $http({
         method: 'POST',
         url: 'api/customer/validtoggle/',
         headers: {
         },
         transformResponse: function (data, headers) {
         },
         data: customer
     })
     function customerToggleData(response) {
        defer.resolve (response.data);
    }

    function customerToggleError(response) {
        defer.reject(response);
    }
    return defer.promise;
}

Answer 2

Like this ,

(function () {
        angular.module('myApp')
            .factory('dataService', ['$q', '$http']);

        function dataService($q, $http,) {

            return {
                customerToggleActive: customerToggleActive
            };

            function customerToggleActive(customerId, index) {

                var customer = {
                    "id": customerId,
                    "index": index
                };

                return $http({
                    method: 'POST',
                    url: 'api/customer/validtoggle/',
                    headers: {
                    },
                    transformResponse: function (data, headers) {
                    },
                    data: customer
                })

            }      
        }

    }());