I was facing this same problem. Let me tell you how I solved it and achieved everything you all seem to be wanting.
Requirements:
In my service, (I'm using Asp.net Web API), I have a controller returning an "HttpResponseMessage". I add a "StreamContent" to the response.Content field, set the headers to "application/octet-stream" and add the data as an attachment. I even give it a name "myAwesomeFile.xlsx"
response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StreamContent(memStream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = "myAwesomeFile.xlsx" };
Now here's the trick ;)
I am storing the base URL in a text file that I read into a variable in an Angular Value called "apiRoot". I do this by declaring it and then setting it on the "run" function of the Module, like so:
app.value('apiRoot', { url: '' });
app.run(function ($http, apiRoot) {
$http.get('/api.txt').success(function (data) {
apiRoot.url = data;
});
});
That way I can set the URL in a text file on the server and not worry about "blowing it away" in an upload. (You can always change it later for security reasons - but this takes the frustration out of development ;) )
And NOW the magic:
All I'm doing is creating a link with a URL that directly hits my service endpoint and target's a "_blank".
<a ng-href="{{vm.getFileHref(FileId)}}" target="_blank" class="btn btn-default"> Excel File</a>
the secret sauce is the function that sets the href. You ready for this?
vm.getFileHref = function (Id) {
return apiRoot.url + "/datafiles/excel/" + Id;
}
Yep, that's it. ;)
Even in a situation where you are iterating over many records that have files to download, you simply feed the Id to the function and the function generates the url to the service endpoint that delivers the file.
Hope this helps!