<a> opens csv file in browser

Question

I use Firebase to generate a download link in AngularJS as follows:

self.getDownloadUrl = function(storage_ref) {
            var q = $q.defer();
            var storage = firebase.storage();
            storage.ref(storage_ref).getDownloadURL().then(function(url) {
              q.resolve(url);
            }).catch(function(error) {
              q.reject(error);
            });
            return q.promise;
        };

Then I bind the url to an object scope.downloadUrl. In my DOM I then try to download the file as follows:

<a href="{{scope.downloadUrl}}" target="_blank">Download</a>

However, when I click on this link, it opens my .csv file in the browser (looks like a text file with comma separated, tested it on Chrome and Edge). How can I prevent this and just enforce a proper download?