Stop angular ui-router from reloading state's template and controller, if only params change?

Question

I have state defined like:

.state("root.home.foo", {
   url: "/foo/:id",
   templateUrl: "/static/partials/home.foo.html",
   controller: 'FooCtrl'
})

When in that state, I respond to a mouse click, wanting to change the parameter...

$state.go('root.home.foo', { id: newId });

But I'm getting flicker as it reloads the state's template and re-create's the controller. Can I make it so that the controller is not recreated? It can respond to a $stateChangeSuccess event, and that's all I need.

Update

Following Jason's suggestion, I tried a sub-state. It works.

.state("root.home.foo", {
   abstract: true,
   url: "/foo",
   templateUrl: "/static/partials/home.foo.html",
   controller: 'FooCtrl'
})
.state("root.home.foo.itemSelected", {        
   url: "/:foo"
})

Listening to the $stateChangeSuccess event...

// In controller's constructor
$scope.$on('$stateChangeSuccess', function (e, to, toParams, from, fromParams) {
  if ($state.current.name == 'root.home.foo.itemSelected') {       
    handleSelection(toParams.id);
  }
});

Answer 1

Try setting reloadOnSearch: false in the route definition. E.g:

.state("root.home.foo", {
  url: "/foo/:id",
  templateUrl: "/static/partials/home.foo.html",
  controller: 'FooCtrl',
  reloadOnSearch: false
})