angularjs UI-Router Nested View

Question

Я использую вложенные представления с UI-Router. Когда я перехожу на этот URL #/user/1, он переходит в первое состояние, что нормально. Но когда я захожу в #/user/abc/2, то он переходит во второе состояние, которое является user.xyz.

.state('user', {
    url: "/user/:id",
    views: {
        'container-view': {
            templateUrl: "user/_Index"
        },
        'A@NetworkDistribution': {
            templateUrl: "user/_TreeView"
        },
        'B@NetworkDistribution': {
            templateUrl: function(stateParams) {
                return '/user/home/' + stateParams.id;
            }
        }
    }
}).state('user.xyz', {
    url: "xyz/:id",
    views: {
        'container-view': {
            templateUrl: "user/_Index"
        },
        'A@NetworkDistribution': {
            templateUrl: "user/_TreeView"
        },
        'B@NetworkDistribution': {
            templateUrl: "user/xyz"
        },
        '[e-mail]': {
            templateUrl: function(stateParams) {
                return "user/xyzInfo/" + stateParams.id;
            }
        }
    }
}).state('user.abc', {
    url: "abc/:id",
    views: {
        'container-view': {
            templateUrl: "user/_Index"
        },
        'A@NetworkDistribution': {
            templateUrl: "user/_TreeView"
        },
        'B@NetworkDistribution': {
            templateUrl: "user/abc"
        },
        '[e-mail]': {
            templateUrl: function(stateParams) {
                return "user/abcInfo/" + stateParams.id;
            }
        }
    }
})

Пожалуйста, наведите меня на правильный путь достижения того, чего я хочу.