Back to Writing

Angular UI UI-Router: Reload Same Controller

How to force a controller to reload in Angular UI-Router when the URL remains the same.

Eli Geske • • 1 min read
angular angular-ui ui-router

Why

While creating a search bar on the main menu of a site, I was using a global param to set the search params to be used in the result list. But the controller does not fire again if the URL is the same.

How

Using $state.transitionTo("router name to controller here", $stateParams, $options) to refire that controller. Look below and see that the transitionTo $options has reload = true and notify = true.

Example

var routes = function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      controller: function ($scope, $state) {
        $scope.search = function () {
          $state.transitionTo('results', { myParam: 'hello' }, { notify: true })
        }
      },
    })
    .state('results', {
      url: '/results/:myParam',
      controller: function ($scope, $state) {},
    })
}

Plunker Example <—