AngularJS location.path() changes URL briefly, then reverts

I had the same problem and couldn't for the life of me figure out what went wrong.What worked for me was changing the anchor tag which had the ng-click event attached to a button tag instead. From what I can gather Angular modifies the behavior of anchor tags when no href attribute is given to prevent the default action, so this might interfere if you update the location manually in a ng-click event handler. That's only my guess though, so hopefully someone will be able to explain better.

The rollback of your browser is happening because the url change is happening two times, when the ng-click function triggers and one when the default browser behavior for an a tag happens.

So that is why you see the update in the url/view and then it goes back to the original state.

It happens this way because that is what the browser understands it should do.

Possible solutions:

Button solutionAs suggested before you can trigger the ng-click on a button, this works because the button doesn't have a meaningful href attribute that updates the url. You can add a href to the button but it won't do anything.

a tag:Instead of doing the update in the ng-click avoid using a function and make the href do the logic of changing the url. It is a cleaner solution because you let the browser do the default behavior of the tag updating the url.

The benefit I see of doing it this way is that anybody can understand the url shceme at a glance, so the code is easier to maintain.

<a href="#/go/to/logic/5">Update to logic 5</a>

a tag with ng-click:If you absolutely need the change to happen programmatically, what you should do is avoid the default behavior of the tag.

In jQuery you would bind to the click event and do the event.preventDefault(), and then do your custom logic.

The AngularJS way is a little bit different because of the logic separation that the framework imposes, so the way to solve this is to create a directive to do the preventDefault.

IgnoreClick directive.js

angularModule.directive('ignoreClick',  function() {    return {        restrict: 'A',        link: function(scope, element) {            element.bind('click', function(event) {                event.preventDefault();            });        }    }});

usage example

<a href=”http://stackoverflow.com/” ignore-click=”ignore-click” ng-click=”whatever()”>Don't Go</a>

Maybe that will not be direct answer to your question on why does it work this way or is this a bug as I couldn't easily reproduce it (I mean the base path), however I will try to suggest you some solution.

You should try to use url params like ?page=4 instead of using url change to indicate which page you want to show together with reloadOnSearch: false param, like this:

 $routeProvider    .when('/', {        templateUrl: 'fruits.html',        controller: FruitCntl,        reloadOnSearch: false    })    .otherwise({redirectTo:'/'})

I think it's enough to have only one route in your case. Now we have to change the paging logic to use search feature from $location (instead of your $location.path):

$location.search('page', this.current_page);

This way it will update your pages without creating new controller every time you change the page. Also it simplifies the routing logic. Hope that helps!

NOTE: I had to remove $locationProvider.html5Mode(true).hashPrefix('!'); as it breaks the site when I run it locally.