Angular route results in 404 - cannot GET

I'm trying to set urls with angulars ui-router so that I may go to a base url OR go to a the same base url + parameter. So - I can either go to /test or /test/1 and it will go to the same page - the only difference being the url parameters. So I have this so far:

 .state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
})
.state('testState', {
    url: '/test/:id',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});

/test seems to work fine, but when I type in test/1, it displays cannot GET. Is this because I am typing the url by hand instead of using ui-routers internal linking (ui-sref). I say this because I notice that when I just type in /test, it's the same thing as well. However, the test and home clicks work fine when I use the links on the page set up with ui-sref. I'd like to be able to share the URL for test/:id, as this will be a web app where people logged in can share links.

Also - is there a better way to setup the test and testState into 1 state perhaps? Thanks!