I have the following route definition in my project:
.state('lab-results', {url: '/lab-results', templateUrl: '...', controller: '...'})
.state('lab-details', {url: '/lab-details/:id', templateUrl: '...', controller: '...'})
.state('lab-components', {url: '/lab-details/:id/components', templateUrl: '...', controller: '...'});
With this, I’m able to navigate b/w views using $location.path(’/lab-results’), $location.path(’/lab-details/’ + id), etc.
However, I’d like to use ui-router a bit more and have nested views and pass data between controllers. If I change my routes to be as follows, it doesn’t transition to child views when I use $state.go(state.name). The URL does change in my browser, but no animations (or errors) happen.
.state('labs', {url: '/lab-results', templateUrl: '...', controller: '...'})
.state('labs.details', {url: '/:id', templateUrl: '...', controller: '...'})
.state('labs.details.components', {url: '/components', templateUrl: '...', controller: '...'});
Any idea why $location.path() works, but $state.go() does not?