One ui-sref link working, the rest don't

Question

I've got a page where I three links on an Angular template. The first link works, the second two don't. The first link shows the cursor as a pointer, the second two show the cursor as auto/default. Here are the links:

<a ui-sref="doctorMain">Doctor Main</a><p/>
<a ui-sref="doctor.chat">Doctor Chat</a><p/>
<a ui-sref="user.chat">User Chat</a> 

The first link works, the other two print out this message in my console:

Error: Could not resolve 'user.chat' from state 'userMain'
    at Object.transitionTo (angular-ui-router.js:3074)
    at Object.go (angular-ui-router.js:3007)
    at angular-ui-router.js:4057
    at angular.js:17918
    at e (angular.js:5552)
    at angular.js:5829(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292(anonymous function) @ angular.js:17921e @ angular.js:5552(anonymous function) @ angular.js:5829

This is how I did routing in my app.config module.

$stateProvider
        .state('doctorMain', {
            url: "/doctorMain",
            templateUrl: "partials/doctor/doctor-main.html",
            controller: 'DoctorJoinChat',
            data: {
                doctor: true
            }
        })
        .state('doctor.chat', {
            url: "/doctorChat",
            templateUrl: "/partials/test.html",
            controller: 'DoctorJoinChat',
            data: {
                doctor: true
            }
        })
        .state('userMain', {
            url: "/userMain",
            templateUrl: "/partials/patient/form.html",
            data: {
                user: true
            }
        })
        .state('user.chat', {
            url: "/userChat",
            templateUrl: "/partials/test.html",
            data: {
                user: true
            }
        });

Answer 1

You need to name you main roots 'doctor' instead of 'doctorMain' and 'user' instead of 'userMain' (the child roots use the name of the main root as prefix). Is that clear enought ?