Wrong value binding for asp.net web API controller action paramters

I have an asp.net web api controller action (RESTful) that accepts 2 string parameters. Such a parameter can be empty. The web api action is consumed from AngularJS codes (client side Javascript) in a asp.net Razor view page.

The problem of that web api action is case 4 (see below) is never hit. In details, case 4 is supposed to run when paramter1 is passed with an empty string, and paramter2 is passed with a non-empty string. However, on running for this case and by using debugger, I find the value of paramter1 is bound to the value of parameter2, and the value of parameter2 becomes null or empty. So there is a wrong data binding with that web api action, and I do not know how to solve it. Please help. Thank you.

The web API controller action looks like:

        [HttpGet]
        [AllowAnonymous]
        public HttpResponseMessage GetProductByParamter1AndParameter2(string paramter1, string paramter2)
        {
            if (string.IsNullOrWhiteSpace(paramter1) && string.IsNullOrWhiteSpace(paramter2))
            {
                // case 1: do something 1 ...
            }
            else if (!string.IsNullOrWhiteSpace(paramter1) && !string.IsNullOrWhiteSpace(paramter2))
            {
                // case 2: do something 2 ...
            }
            else
            {
                if (!string.IsNullOrWhiteSpace(paramter1) && string.IsNullOrWhiteSpace(paramter2))
                {
                    // case 3: do something 3 ...
                }
                else // when paramter1 is empty and paramter2 is not empty
                {
                    // case 4: do something 4 ... but this is never hit
            }
        }

And the custom route for that web API controller action looks like:

 config.Routes.MapHttpRoute(
                name: "ProductApi_GetProductByParamter1AndParameter2",
                routeTemplate: "api/ProductApi/GetProductByParamter1AndParameter2/{parameter1}/{parameter2}",
                defaults: new
                {
                    controller = "ProductApi",
                    action = "GetProductByParamter1AndParameter2",
                    parameter1 = "",
                    parameter2 = ""
                }
            );

In the cshtml view page, on the client side AngularJS (Javascript codes) to consume that web API, I am coding things like:

myApp.factory('ListProductFactory', function ($http, $q) {

        return {
            getProducts: function (par1, par2) {

                var url = _baseUrl + '/ProductApi/GetProductByParamter1AndParameter2/' + par1 + '/' + par2;
                return $http({
                    method: 'GET',
                    url: url
                })
            }
        };
    });