Angular UIRouter not changing with child state

I am using Angular UIRouter and have the following states set up:

$stateProvider.state('forgot-password', {
        url: '/forgot-password',
        component: 'forgotPassword'
})
.state('forgot-password.reset', {
        url: '/:token',
        component: 'forgotPasswordReset'
});

When I navigate to /forgot-password I get the correct view however when I navigate to /forgot-password/abc I still get directed to forgotPassword. How do I get the router to send me to the forgot-password.reset state?