File download links with angulars UI-Router

Question

I'm trying to create a simple link in my angularJS app to files that have been uploaded. I have no problem producing the link, as this is pretty trivial. The issue I have however, is that the routing system I have intercepts the link and tries to load it within angular, which of course fails and just returns to the default route. This of course, is not really the behaviour that I want. My links are produced using

<a href="{{doc.url}}">{{doc.name}}</a>

I've also tried with

<a ng-href="{{doc.url}}">{{doc.name}}</a>

But obviously that doesn't change the resulting link. The resulting HTML is

<a class="ng-binding" href="/uploads/attachment/file/13/FILENAME.pdf">FILENAME.pdf</a>

Which is correct. Now though, the moment I click the link, I just get taken back to my default route. What can I do to stop ui-router trying to handle this link?

Answer 1

Google gave me this:

"If you don't want AngularJS to "trap" links in anchors, add target="_self" .

<a href="..." target="_self">On Error GoTo Hell</a>

source: https://coderwall.com/p/em4vua

Btw, next time maybe don't tag this RoR, as it is purely an angularjs issue