AngularJS ui-router state doesn't refresh on back - angularjs

Question

I have an app setup with 2 states, A and A.B done this way:
$stateProvider.state('A', {
url: "/A/{aId}",
controller: 'AController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/layout";
}
}).state('A.B', {
url: "/B/{bId}",
controller: 'BController',
templateUrl: function($stateParams) {
return "/A/" + $stateParams.aId + "/B/" + $stateParams.bId+ "/layout";
}
});
When I'm in state A.B ( the url would be somthing like #/A/12/B/123 ) and go back using the back button of the browser or transitionTo the url changes, state A.B is cleared but state A doesn't render back. As far as I can tell the controller isn't triggered.
So if I'm in A/12/B/123 and go back to A/12 nothing happens, but if I go back to A/13 ( using transitionTo ) it renders.
On the sample app from angular-ui-router project this scenario works fine, so I think there might be something wrong in my setup. I think it's worth mentioning that on index.html I have a ui-view which loades state A and the template for state A has another ui-view that loads state A.B
If anyone could help, I would really appreciate it

Answer 1

Have you tried using this:
$state.reload()
Its a method that force reloads the current state. All resolves are re-resolved, events are not re-fired, and controllers reinstantiated
This is just an alias for:
$state.transitionTo($state.current, $stateParams, {
reload: true, inherit: false, notify: false
});