Nested views with dot notation - angularjs

Question

can someone help me with this nested views in angular js.
I use this dot notation
$stateProvider
.state('contacts/:id', {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
}
})
.state('contacts/:id.list/:id', {
templateUrl: 'contacts.list.html'
});
function MainCtrl($state){
$state.transitionTo('contacts/:id.list/:id' );
}
In html I call state change also like this
<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
But always I get
angular.js:12477 Error: Could not resolve 'contact/2.list/2' from state 'contact/:id'
Thnx
EDIT:
I make a change like #Maxim Shoustin answered. Now state changed, but in child navigation when I click on item, parent ui-view is full refreshed (child navigation and ui-view) not only child
now my state looks like this
.state('client', {
url: '/client/info/:itemID',
templateUrl: 'clientInfo.html',
controller: 'detailControllerClient as vm',
})
.state('client.detail', {
url: '/detail/:itemID',
templateUrl: 'itemInfoById.html',
controller: 'detailControllerClient as vm',
})
And html is here. (infoDisplay.html is parent view inside index.html. This ui-view in code bellow is child view (client.detail))
infoDisplay.html
<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
<table class="table-hover">
<thead>
<tr>
<th>item ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in clientDetail">
<td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>

Answer 1

<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
You cannot use id.list with id because Angular determines like duplicated name id in pattern. But id_list is ok. For example
See ui-sref Docs
Where state is:
.state('contacts', {
url: '/contacts/:id_list/:id',
templateUrl: 'contacts.html'
})
and HTML:
<a ui-sref="contacts({'id_list': value.id, 'id': value.id})" >contacts</a>
Demo Plunker