How to Change Post Variable Value in a AngularJS Controller?

I'm having two buttons, each button has ng-click event, the click event calls one method, the method has one argument.

I wish to pass the value of the argument to the Service Side via HTTP POST from AngularJS Controller.

The AngularJS Function CustomerGender(index), I wish to pass the index value to the Service.

<div ng-app="Customer" ng-controller="CustomerCtrl">
    <button ng-click="CustomerGender('Male')">List of Male Customers</button>
    <button ng-click="CustomerGender('FeMale')">List of Female Customers</button>
</div>

The AngularJS Source Code:

Note: The URL http://www.w3schools.com/angular/customers.php is a Sample URL

var CustomerApp = angular.module('Customer', []);
CustomerApp.controller('CustomerCtrl', function($scope, $http, $cacheFactory) {

    $scope.CustomerGender = function(index){

        var request = $http({
            method: "post",
            url: "http://www.w3schools.com/angular/customers.php",
            data: {
                token: index
            },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });
        request.success(function (response) 
        {
            $scope.data = response.records;
        });
    };
});

The Function is not working. If I set token: 'Male' directly, in Controller, then it pass the value to the Service, If i set token: index, then it can't pass the value to the Service. Kindly assist me.