Why does my Angular.js $location.path(url) loop back to root?

Using Angular.js, I'm attempting to create a button that when clicked pushes the member to a new url (no page reload) and have the $routeProvider set some $routeParams for the controller to use when making a JSON call for data.

My $routeProvider is setup like so:

app.config(function ($routeProvider) {
    $routeProvider.when('/list/:base/:keyword', { templateUrl: 'list', controller: 'listCtrl' })
});

This loads the listCtrl, using the "list" template. On the listCtrl I make a call for data like so:

app.controller('listCtrl', function ($scope, $routeParams, $location, $http) {
    console.log('listCtrl called');
    $http.get('urlForData&kw=' + $routeParams.keyword).success(function (data) {
        $scope.results = data;
    });
});

This works fine if I hit the url manually /#/list/baseName/keyword puts all the right $routeParams into the listCtrl and the JSON call works.

I'd like to get the user to that route on click, in my homeCtrl I have a method to change routes, like so:

app.controller('homeCtrl', function ($scope, $routeParams, $location) {
    var model = {
        criteria: 'yakiniku',
        base: 'yokota-ab-japan'
    };
    $scope.model = model;

    $scope.changeRoute = function () {
        $location.path('/list/' + model.base + '/' + model.criteria);
    };
});

I don't put a url into the changeRoute() method because I want to direct to a url based on values the member has entered into a couple inputs, so I concatenate the model properties into the .path(url) method on the $location service.

I then put an ng-click="changeRoute()" attribute on an HTML <button/>. However, when I click the button, I can see the url change for a split second, then switch right back to the root url. I don't have a .otherwise() route setup, why does it jump back to the root instantly?

Also, I have no third-party libraries referenced, only angular.

Update It may be important to note when I setup the $locationProvider to use Html5 mode, it changes the url just fine... but since I host the app on an ASP.NET MVC site, I need it to use the hash, not HTML5 mode.

While the route changes work in HTML5 mode, a page refresh on a url without the hash tag will break because it interferes with ASP.NET MVC routes, and I'm trying to allow deep linking into my angular app.

I had a similar issue and got a solution. I hope this helps someone. I have a function in the controller that changes the path using the location method. It is something like this:

$scope.goHome = function(){
    $location.path('/home');
}

When I call the function from an anchor tag with href="#" it fails.

The trick is to remove the href attribute. As far as I understand angular moves you to the new path but then your browser executes the # value in the href attribute and you find yourself back in the same page.

So if you remove the href="#" it works. If you are a fan of hand cursor for links use CSS to get it.

.myLink{
    cursor:pointer;
}

Cheers, Doruk

You should check if you've enabled or not HTML5 routing. Here is link to docs: http://docs.angularjs.org/guide/dev_guide.services.$location

Here is working plunker example of your situation: http://plnkr.co/edit/snCoGhFnLqgLSIGrJCe7?p=preview