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

using angular.js, i'm attempting create button when clicked pushes member new url (no page reload) , have $routeprovider set $routeparams controller use when making json call data.

my $routeprovider setup so:

app.config(function ($routeprovider) {     $routeprovider.when('/list/:base/:keyword', { templateurl: 'list', controller: 'listctrl' }) }); 

this loads listctrl, using "list" template. on listctrl make call data 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 hit url manually /#/list/basename/keyword puts right $routeparams listctrl , json call works.

i'd user route on click, in homectrl have method change routes, 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 url changeroute() method because want direct url based on values member has entered couple inputs, concatenate model properties .path(url) method on $location service.

i put ng-click="changeroute()" attribute on html <button/>. however, when click button, can see url change split second, switch right root url. don't have .otherwise() route setup, why jump root instantly?

also, have no third-party libraries referenced, angular.

update may important note when setup $locationprovider use html5 mode, changes url fine... since host app on asp.net mvc site, need use hash, not html5 mode.

while route changes work in html5 mode, page refresh on url without hash tag break because interferes asp.net mvc routes, , i'm trying allow deep linking angular app.

i had similar issue , got solution. hope helps someone. have function in controller changes path using location method. this:

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

when call function anchor tag href="#" fails.

the trick remove href attribute. far understand angular moves new path browser executes # value in href attribute , find in same page.

so if remove href="#" works. if fan of hand cursor links use css it.

.mylink{     cursor:pointer; } 

cheers, doruk