AngularJS ASP.NET WebAPI - Multiple GET Methods not working

I am building a small app using AngularJS and WebAPI.

Usecase: I am passing a string parameter from the drop-down ng-change event to a function called getcatdetails(selectedcategory) in controller.js and service.js calls WEBAPI.

Problem: When I add additional method in WEB API the code doesn't get fired. When I put the break point in controller and Service.js it looks fine but the call doesn't happen from Service to WEBAPI.

Here is the code..

HTML:

<select ng-model="selectedcategory" ng-options="item for item in catlist" ng-change="getcatdetails(selectedcategory)">
    <option value="">Select</option>
</select>

Controller.js

 $scope.getcatdetails = function (selectedcategory) {
    var catdetails = CategoryService.getcatdetails(selectedcategory);
 }

Service.js

this.getcatdetails= function (selectedcategory) {
    return $http.get("/api/ProductAPI/getcatdetails" + selectedcategory);
}

WEB API method

[Route("/api/ProductAPI/getcatdetails")]
public string getcatdetails(string selectedcategory)
{
    return selectedcategory;
}

Please help me ...i am totally struck

This is what I tried by I am still unable to call WEB API method..

Service.js

 this.getcatdetails = function () {
   return $http({ method: 'GET', url: 'api/productapi/getcatdetails', data: '"' + selectedcategory + '"' })
}


WEB API Method..

    [Route("api/ProductAPI/getcatdetails/{selectedcategory}")]
   public string getcatdetails(string  selectedcategory){

       return selectedcategory;

}