Angular: where should transitions among states be?

Here's a design issue:

I am making a web application with Angularjs, and I am trying to use the $stateProvider to model the routing of the sections within the app. Imagine I have two states, A and B, each one with its template and controller:

.state('A', {
  url: "/A",
  templateUrl: 'templates/A.html',
  controller: 'ACtrl'
})

.state('B', {
  url: "/B",
  templateUrl: 'templates/B.html',
  controller: 'BCtrl'
})

Now suppose that from A, on a certain condition specified within A controller, I need to go to state B, what I would normally do is to call $state.go('B'); within the A controller:

.controller('ACtrl', function($scope, $state) {
  $scope.gotonext = function(){ $state.go('B'); };
})

Now, in my opinion, the next state after A should be specified where I define the routing, and not within the controller of A, something like this:

.state('A', {
  url: "/A",
  templateUrl: 'templates/A.html',
  controller: 'ACtrl',
  nextState: 'B' //<-- this line is not angular
})

But I have found no way for doing something like this. Of course, there may be more than one "nextState", and these are contextual to the controller, but still, I would see the transition decoupled from the the actual landing state.

So here's the question:

what is the best place where to specify the transition to the next state?