How to use ngResource to get picture from WebAPI to show Using ng-src

Question

I'm using WEBAPI (with [Autorize]) with a Angular client.

I'm trying to use the image send from the webapi:

---

public HttpResponseMessage Document(string file)
{
string bestand = file.ToLower();
var path = @"C:\Temp\"+file;
HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(path, FileMode.Open, FileAccess.Read);
result.Content = new StreamContent(stream);
result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/jpg");
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
{
    FileName = file
};
return result;
}

---

In angular:

$scope.getFile = function (file) 
{
compassResource.get({ 'Method': "document", "Type": file }, 
    function (data) {// success
    console.log(data);
    var blob = new Blob([data]);
    blob.name = file;
    blob.lastModifiedDate = new Date();
    console.log(blob);
    return blob;

}, function (error, status) { // failure
    console.log('fout jpg');
    console.log(error);
    console.log(status);
});
$scope.image = $scope.getFile('test.jpg');

---

In the HTML:

   <img ng-src="{{image}}" alt="user image" />

---

I do receive DATA but from that point I do not have a clue how to proceed. I've tried several things. I'm using ngResource with OidcManager and the bearer token. But even with $http I do receive data (and the token is used!!), but what should I do with the data so that the image is visible.

Thanks

Ton