title: Why does my Angular.js $location.path(url) loop back to root?
body: <p>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 <code>$routeProvider</code> set  some <code>$routeParams</code> for the controller to use when making a JSON call for data.</p>
  
  <p>My <code>$routeProvider</code> is setup like so:</p>
  
  <pre><code>app.config(function ($routeProvider) {
      $routeProvider.when('/list/:base/:keyword', { templateUrl: 'list', controller: 'listCtrl' })
  });
  </code></pre>
  
  <p>This loads the <code>listCtrl</code>, using the "list" template. On the <code>listCtrl</code> I make a call for data like so:</p>
  
  <pre><code>app.controller('listCtrl', function ($scope, $routeParams, $location, $http) {
      console.log('listCtrl called');
      $http.get('urlForData&amp;kw=' + $routeParams.keyword).success(function (data) {
          $scope.results = data;
      });
  });
  </code></pre>
  
  <p>This works fine if I hit the url manually /#/list/baseName/keyword puts all the right <code>$routeParams</code> into the <code>listCtrl</code> and the JSON call works.</p>
  
  <p>I'd like to get the user to that route on click, in my <code>homeCtrl</code> I have a method to change routes, like so:</p>
  
  <pre><code>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);
      };
  });
  </code></pre>
  
  <p>I don't put a url into the <code>changeRoute()</code> 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 <code>.path(url)</code> method on the <code>$location</code> service.</p>
  
  <p>I then put an <code>ng-click="changeRoute()" attribute</code> on an HTML <code>&lt;button/&gt;</code>. 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 <code>.otherwise()</code> route setup, why does it jump back to the root instantly?</p>
  
  <p>Also, I have no third-party libraries referenced, only angular.</p>
  
  <p><strong>Update</strong>
  It may be important to note when I setup the <code>$locationProvider</code> 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.</p>
  
  <p>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.</p>