Angularjs and web api - $http post FormData count is 0 in web api

I am working on my mobile application using Angularjs and c# Web API. I am new to this platform. In my application there is a part in which I have to upload files and data from client (Angularjs) to server (c#). While posting data, the FormData posted successfully from the client side but received as empty data in the server side.I have been trying to figure it out since the last month but still unable to get a solution. Please help me out. This is my code:

    if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        var root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root);


        try
        {

            await Request.Content.ReadAsMultipartAsync(provider);   

            var Token = provider.FormData.GetValues("Token")[0];
            var Product = provider.FormData.GetValues("Product")[0];
            var Reference = provider.FormData.GetValues("Reference")[0];
            var ModuleId = Convert.ToInt32(provider.FormData.GetValues("ModuleId")[0]);
            var Repeat = "";
            if (provider.FormData.GetValues("Repeat") == null)
            {
                Repeat = "N";
                // var Repeat = provider.FormData.GetValues("Repeat")[0];
            }
            else
            {
                Repeat = "Y";
            }

            var Description = provider.FormData.GetValues("Description")[0];

            var Attachment1 = provider.FileData[0];

            if (!CRQExtentions.IsValidToken(Token))
                //  return new HttpResponseMessage(HttpStatusCode.Unauthorized);
                return Request.CreateResponse(HttpStatusCode.Unauthorized, "Invalid Token");


            var tr = new TicketRepository();

            var res = tr.AddTicket(Token, Product, Reference, ModuleId, Repeat, Description, Attachment1, Attachment2);


            string s = "Success";
            System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer();
            return Request.CreateResponse(HttpStatusCode.OK, new { data = "Test msg" });

        }
        catch (Exception e)
        {
            string f = "Failed";
            System.Web.Script.Serialization.JavaScriptSerializer ser = new System.Web.Script.Serialization.JavaScriptSerializer();
            return Request.CreateResponse(HttpStatusCode.BadRequest, new { data = "Test msg" });
        }

HTML:

    <form enctype="multipart/form-data" ng-submit="uploadDataWithFile()">
    <input type="file" file-model="myFile"  name="Attachment1" multiple />
    <input type="button" ng-click="uploadDataWithFile()" value="Send" name="button" /></form>

ANGULARJS:

myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8';}]);

myApp.service('fileUpload', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
    var fd = new FormData();
    fd.append('Attachment1', file);
    //console.log(fd);
    $http.post(uploadUrl, fd, {
        //withCredentials: false,
        headers: {
            'Content-Type': undefined
        },

        transformRequest: angular.identity,
        responseType: "arraybuffer"
    }).success(function (response, status, headers, config) {
        console.log(response);

        if (status == 200 || status == 202) {
            //do whatever in success
        }
        else {
            // handle error in  else if needed 
        }
    }).error(function (error, status, headers, config) {
        console.log(error);
        ons.notification.alert("Error in Saving New CRQ");
        // handle else calls
    });
    }
    });

    myApp.controller('NewCRQController', ['$scope', '$http', 'fileUpload', function ($scope, $http, fileUpload) {
    $scope.uploadDataWithFile = function () {
    var file = $scope.myFile;
    console.dir(file);
    var checkedItem;
    if ($scope.switchon == true) {
        checkedItem = "Y";
    }
    else {
        checkedItem = "N";
    }
    var uploadUrl = "http://localhost:11663/api/Tickets/CreateNewCrqWithFiles";
    fileUpload.uploadFileToUrl(file, uploadUrl);
}
    }]);

Some screenshots of errors