How to a pdf stream in Web API from ExportToStream

Question

I'm having trouble with exporting crystal report to pdf through streaming.. Im using Web Api and supposedly return pdf streaming to my client which is angularJS

Here is my Code..

Server Side

Controller

[Route("api/transcript")]
        [HttpPost]
        public async Task<HttpResponseMessage> Post(HttpRequestMessage request)
        {
            var content = request.Content;
            string jsonContent = content.ReadAsStringAsync().Result;

            // this code here is in repository. It will return ReportDocument.
            // It is functional and return the document file so i didnt include the code for this.
            ReportDocument rdoc = ITORRepo.LoadReport(jsonContent); 

            TOR _tor = JsonConvert.DeserializeObject<TOR>(jsonContent);
            string hdStudCode;
            hdStudCode = _tor.studCode;
            try
            {                   
                HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);

                response.Content = new StreamContent(rdoc.ExportToStream(ExportFormatType.PortableDocFormat));
                response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
                response.Content.Headers.ContentDisposition.FileName = "Transcript.pdf";

                return response;
            }
            catch (Exception)
            {
                //return string.Empty;
                throw;
            }
        }

Client Side

AngularJS

$scope.Generate = function () {
        if (typeof $scope.id != 'undefined') {
            var data = {
                filename: 'OTR.rpt',
                studCode: $scope.studCode,
                orno: $scope.orNumber,
                orderno: $scope.orderNumber,
                orderdate: document.getElementById('date').value,
                graduationdate: document.getElementById('date2').value,
                remarks: $scope.remarks
            };
            $http.post(serviceUrl + 'api/transcript', data, { responseType: 'arraybuffer' }).success(function (response) {
                var file = new Blob([response], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                $scope.content = $sce.trustAsResourceUrl(fileURL);
                $('#TranscriptModal').modal('show');
            });
        }
    };

HTML Page

<object data="{{content}}" width="100%" height="100%">
 <div class="alert alert-danger text-center" style="border-radius:0">
You don't have PDF Plugin for this browser.  <a href="{{content}}">[ Click Here ]</a> to download the PDF File.
 </div>
 </object>

This code function sometimes.. It means that there are times that the pdf is generated and display but there are times that no display..

There is no error with my server side nor my client side.

Please tell me what is the problem to my code why is there are times it has no display and there are times that there is a display.. and please help me what is the best approach to my problem.

Thank you so much...