Unable to receive file in spring mvc ( servlet 3.1) sent from angularjs

Question

I'am trying to initiate the uploading of the file from AngularJS and send that file to the server,(Spring-mvc) and further process and manipulate the file received.. And in the controller side after a long research done i figured out in this resource to receive the file in spring in 2 ways, and i tried both the methodologies, but i am having issues in receiving the file passed from angularjs..

This is how i am sending selecting and sending the file from angular.

JSP page

     <input type="text" name="description" ng-model="description"/>
     <input type="file"  name="file" file-input="files"  style="background-color:#F0F0F0 ;  ;color:black;" />

     <button name ="uploadFile" ng-click="uploadFile()">Upload</button>

fileInput Directive

    fmApp.directive("fileInput",function(){
return {
    scope:{
        fileInput: "="
    },
    link:function(scope,ele,attrs){
        console.log("-----Inside file Input Directive---------");
        ele.bind("change",function(changeEvent){
            var reader=new FileReader();
            reader.onload=function(loadEvent){
                scope.$apply(function(){
                    scope.fileInput=loadEvent.target.result;
                    console.log("fileInput==::  "+scope.fileInput);
                });
            }
            reader.readAsText(changeEvent.target.files[0]);
            console.log("reader    : "+reader );
            /*scope.$apply(function(){
                scope.fileInput=reader;
            })*/
        });
    }
}

});

Angular Controller

   $scope.uploadFile=function(){
        console.log("--------Inside uploadFile()--------");
        var file=$scope.files;
        console.log("Selected file is : "+JSON.stringify(file));
        var uploadUrl="fileManipulation.html";
        fileUpload.uploadFileToUrl(file,uploadUrl,$scope.description);
    };

fileUpload Service

    fmApp.service("fileUpload",function($resource,$http){
        console.log("--------Inside fileUpload service---------");
        this.uploadFileToUrl=function(file,uploadUrl,description){
        console.log("--------Inside uploadFile function---------");
        var fd =new FormData();
        fd.append('file',file);
        fd.append('description',description);
        $http.post(uploadUrl,fd,{
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
     })
    .success(function(){
        alert("success");
    })
    .error(function(){
        alert("Error");
    })
   }
});

And then in the controller side i am using servlet 3.1

 @RequestMapping(value="/fileManipulation" , method = RequestMethod.POST)
    public String uploadFileQM( HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
        System.out.println("---Inside File Manipulation Request Mapping-----");

        // Servlet 3.1's implementation.....
        String description = request.getParameter("description"); // Retrieves <input type="text" name="description">
        System.out.println("-----File Description-----"+description);

        Part filePart = request.getPart("file"); // Retrieves <input type="file" name="file">
        System.out.println("-----File Received-----------");

        String fileName = filePart.getSubmittedFileName();
        System.out.println("-----FileName------:"+fileName);

        long fileSize=filePart.getSize();
        System.out.println("-----File Size-------"+fileSize);

       InputStream fileContent = filePart.getInputStream();

       //Extracting the contents in InputStream into String..
       BufferedReader br=null;
        StringBuilder sb=new StringBuilder();
        String line;
        try{
            br=new BufferedReader(new InputStreamReader(fileContent));
            while((line=br.readLine())!=null){
                sb.append(line);
            }
        }
        catch(IOException e){
            e.printStackTrace();
        }
        finally{
            if(br!=null){
                try{
                    br.close();
                }
                catch(IOException e){
                    e.printStackTrace();
                }
            }
        }
        line=sb.toString();
        System.out.println("----The contents of the file are ----\n"+line);
                return null;

    }

Ones i select the file from the angularjs and put in the form-data and send that request to the spring mvc and try to display the basic file info such as file name and size , the value i get is undefined, it seems that the actual contents have not been received in the spring..

But the same controller works fine and the file info is acquired, when the file selection and submitting process is done as part of the jsp with in the tag, like in the below code snippet.

And the problem with this is that, the response is returned as a completely new view redirecting to a different blank page..

<form action="http://localhost:8080/Customerinfo/fileManipulation.html" method="post" enctype="multipart/form-data"">
                <input type="text" name="description"/>
                <input type="file" name="file"/>
                <input type="submit">
 </form> 

I want the request to be received as part of it made from angularJS and not from normal jsp format, so that i can handle the response back in angular in my own way..

Please help me out to resolve this problem which has held me up from many days, with your suggestions.. cheers..