URL not finding state ( ui.router and angularjs)

I have the following states:

$stateProvider.
            state('candidates', {
                abstract: true,
                url: '/candidates',
                templateUrl: '/Scripts/App/js/Views/candidates/candidates.html',
                controller: 'candidatesTableController'
            }).                
            state('candidates.item', {
                url: '/{item:[0-9]{1,4}}',
                templateUrl: '/Scripts/App/js/Views/candidates/candidate.html',
                controller: 'candidatesDetailController'
            }).
            state('candidates.item.details', {
                url: '/details',
                templateUrl: '/Scripts/App/js/Views/candidates/partials/generalDetails.html',
                controller: function($scope, $stateParams) {
                            $scope.item= $stateParams.item;
               }
            }).
            state('candidates.item.edit', {
                url: '/details/edit',
                templateUrl: '/Scripts/App/js/Views/candidates/partials/form.html',
                controller: function($scope, $stateParams) {
                            $scope.item = $stateParams.item;
                }
            }).state('candidates.item.photo', {
                url: '/details/photo',
                templateUrl: '/Scripts/App/js/Views/candidates/partials/updatePhotoID.html',
                controller: function($scope, $stateParams) {
                            $scope.item = $stateParams.item;
                }
            });

Here my urlRouterProvider:

$urlRouterProvider
            .when('/candidates/:item', '/candidates/:item/details')
            .otherwise("/");

When I use ui-sref everything work fine but when i using the actual url, it never can find the following url:

"/#/candidates/4/details"

it redirect to the root ("/#/")

I can't figure out why?

Thanks