Download pdf file automatically using Angular Js

Question

I Have an API made using WEB API which gives a pdf file using type as HttpResponseMessage.

This API is being called from a web application, which uses Angular Js.

My problem is, i am not able to download the file when this API is called. It gives me corrupted file.

Here is my WebAPI code

            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
            byte[] fileBytes = System.IO.File.ReadAllBytes(outputFilePath);
            response.Content = new ByteArrayContent(fileBytes);
            response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
            //response.Content.Headers.ContentDisposition.FileName = "Certificate#" + ideaModel.IdeaNumber + ".pdf";
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

            return new CertificateModel { file = response, fileName = "Certificate#" + ideaModel.IdeaNumber.ToString()+".pdf" };

In angular JS i am calling URL, and trying to save file using FileSaver.js

  $http.post(getUrl('api/Reward/DeliverGift'),
        {
            IdeaNumber: '4',
            SubmittedBy: 'Self',
        },{responseType: 'arraybuffer'}
    ).then(function (response) {            
        var certificateFile = new Blob([response.data.file], { type: 'application/pdf' });
        saveAs(certificateFile, response.data.fileName );

    }, function (errors) {         
    });

My original file is of 195Kb, however above code gives me a file of 9 bytes