title: Angular Router - $watch state params not working
body: <p>I'm using Angular UI router (very latest version) and I'm trying to update the search parameters while not reloading the whole page. I want to $watch the $stateParams but the watch isn't working with my settings.</p>
  
  <p>For clarity, when I use transitionTo() I want the URL to be updated and I want the $stateParams to be updated and a $watch to be fired on the $stateParams, but I don't want the whole controller to be run again. reloadOnSearch: false stops the controller from running again but has the side effect of stopping the $watch from firing, or so it seems. Anyway here is my code</p>
  
  <p>$stateProvider config:</p>
  
  <pre><code>$urlRouterProvider.otherwise("/search");
  
  $stateProvider
      .state('search', {
          url: "/search?locationtext&amp;method",
          templateUrl: "templates/searchResults.tpl.html",
          controller: 'SearchResultsCtrl as searchResults',
          reloadOnSearch : false
      })
  </code></pre>
  
  <p>Button click handler:</p>
  
  <pre><code>$state.transitionTo($state.current, {locationtext: 'london'}, {
      location : true,
      reload: false,
      inherit: false,
      notify: true
  });
  </code></pre>
  
  <p>$watch the State params:</p>
  
  <pre><code>$scope.stateParams = $stateParams;
  
  $scope.$watchCollection('stateParams', function(){
      $log.info("State params have been updated", $scope.stateParams);
  });
  </code></pre>
  
  <p>This is what is happening:</p>
  
  <p>1) When the state is first loaded, the watch fires and the stateparams are logged to the console.</p>
  
  <p>2) When I click the button, the state is transitioned and the url says #/search?locationtext=london</p>
  
  <p>3) The watch is not fired at this point, although a console.log shows that the $state.params have been updated</p>
  
  <p>4) If I hit the browser back button locationtext=london is removed from the URL but again the watch doesn't fire.</p>
  
  <p>Not sure what I'm doing wrong here. I assume I have set up the watch correctly otherwise it wouldn't fire when the controller is first loaded?</p>
  
  <p>Any ideas would be greatly appreciated.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I have also added the following</p>
  
  <pre><code>$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
      console.log("$stateChangeStart", $rootScope.stateParams);
  
  });
  </code></pre>
  
  <p>but the event isn't even firing, despite the url changing and the $state.params being different after the transitionTo();</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>I've been trawling through the code and it seems as if setting reloadOnSearch to false means that if you only change search parameters then nothing happens, even though the URL changes the transition doesn't happen and the $stateChangeStart event isn't broadcast.</p>
  
  <p>This isn't what I was expecting. I was expecting all of that to happen but the controller not to be reloaded. So now I'm looking for a way to change the search parameters and watch for changes so that I can update my search results. It looks like the Angular UI Router has no way to do this because you either get a controller reload or no events.</p>