File download links with angulars UI-Router


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}}">{{}}</a>

I’ve also tried with

<a ng-href="{{doc.url}}">{{}}</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?

Problem courtesy of: PaReeOhNos


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>


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

Solution courtesy of: Maarten

View additional discussion.