UI-Router considering url as state - angularjs

Question

I have my routing defined as below
$stateProvider
('MasterPage', {
url: '/',
templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
url: 'dashboard',
templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
url: 'test/:id',
templateUrl: 'views/test.html',
})
$urlRouterProvider.otherwise('/');
I have links that allows me to navigate from mainpage to dashboard and then to the test page which works fine. When I navigate to the test page with an id:1234, which makes my url as <HOST>/#/test/1234, and try to refresh it fails. It gives me an error saying:
Cannot resolve state 'MasterPage.test/1234' from 'MasterPage.test'
Why is UI-Router considering the url segment as a state?
Update
I dont have any ui-sref. I am going to the test page by using $state.go('MasterPage.test', {id:1234}).

Answer 1

There is working plunker
This issue is usually related to wrong ui-sref setting
<a ui-sref="MasterPage.test/1234">
we need to split and pass 1) the state name, and 2) state params like this:
<a ui-sref="MasterPage.test({id:1234})">
In case, we want to use href, we just have to concatenate parent and child url definitions (parent '/', child 'test/:id') :
<a href="/test/1234">
EXTEND
So, these states (almost unchanged):
.state('MasterPage', {
url: '/',
templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
url: 'dashboard',
templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
url: 'test/:id',
templateUrl: 'views/test.html',
})
will work with these links
<a href="#/">
<a href="#/dashboard">
<a href="#/test/1234">
<a href="#/test/9875">
<a ui-sref="MasterPage">
<a ui-sref="MasterPage.dashboard">
<a ui-sref="MasterPage.test({id:2222})">
<a ui-sref="MasterPage.test({id:4444})">
There is working plunker