State.go for AngularJs UI Routing - angularjs

Question

I setup a small example based on the article posted on setting up UI routing.
I modified the example to test explicitly navigating from a child nested state to sibling state using $state.go(). any ideas what I am doing wrong?
I keep getting the error below:
Error resolving State. Could not resolve .paragraph from state home.list
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope,$state) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
$scope.navigateToNextState = function () {
$state.go('.paragraph');
};
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
http://plnkr.co/edit/Nae6xz9qcBp3IRYi0wcD?p=preview

Answer 1

Controller should be adjusted like this:
controller: function($scope, $state) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
$scope.navigateToNextState = function () {
$state.go('^.paragraph');
};
}
We need a $state as one of function params. And we are in a child, so we have to use '^.paragraph' (instead of '.paragraph') to ask for another child of our parent
Checked working fixed version here