AngularJS <a> tag links not working

AngularJS suffers from a sparse documentation, I hope their gaining momentum will improve it. I think AngularJS is primarily intended as a SPA, and maybe the idea behind deactivating by default all a tags allows one to easily incorporate angular into some already existing html.

This allows for quick refactoring of the default "routing" behaviour of a "traditional" website (well, script pages linked between each other) into the angular routing system, which is more of an MVC approach, better suited for Web Apps.


I know this post is old, but I recently ran into this problem as well. My .html page had the base

//WRONG!
<base href="/page" />

and the fix:

//WORKS!
<base href="/page/" />

notice the forward-slash ('/') after 'page'.

Not sure if this applies to other cases, but give it a try!


From the mailing list I got an answer:

Have you by any chance configured your $locationProvider to html5Mode? If yes this would cause your problems. You could force it to always go to the url by adding target="_self" to your tag. Give it a shot.

I had configured to use HTML5 so adding the target="_self" to the tag fixed the problem. Still researching why this works.


Not sure if this has been updated since this post was answered, but you can configure this in application startup. Setting the rewriteLinks to false re-enables your a tags, but still leaves html5mode on, which comes with all its own benefits. I have added a bit of logic around these settings to revert html5mode in browsers where window.history is not supported (IE8)

app.config(['$locationProvider', function ($locationProvider) {

    if (window.history && window.history.pushState) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true,
            rewriteLinks: false
        });
    }
    else {
        $locationProvider.html5Mode(false);
    }
}]);

Angular Docs on $locationProvider

The benefits of html5mode vs hashbang mode