Question: I am using ui-router in angular js.

I have state defination as 

```
  $stateProvider.state('main', {
  url:'/',
  templateUrl:'views/main.html',
  controller:'MainCtrl'
}).state('practice', {
    url:'/practice',
    templateUrl:'views/practice/practice.html',
    controller:'PracticeCtrl
    }
  }
)..state('practice.exam', {
    url:'/{examName}',
    templateUrl:'views/practice/exam.html',
    controller:'ExamCtrl'
    }
  }
).state('practice.exam.service', {
      url:'/{serviceName}',
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practice.exam.service.competitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practice.exam.service.subject', {
    url:'/{subjectName}',
    templateUrl:'views/practice/subject.html',
    controller:'SubjectCtrl'
  }
)

```

When I am hitting ui-sref="practice.exam.service.subject({subjectName: 'Physics'})" 

Both the template i.e `templateUrl:'views/practice/competitive_sample_paper.html'` 
and
`templateUrl:'views/practice/subject.html'` gets loaded. 
I want only `templateUrl:'views/practice/subject.html'` to get loaded when i use 
`ui-sref="practice.exam.service.subject({subjectName: 'Physics'})"` .

Please help.

Answer: 
add name for ui-view in your pages 
in practice.html:

```
<div ui-view="practice"></div>

```

views/practice/exam.html:

```
<div ui-view="practiceExam"></div>

```

views/practice/service.html:

```
<div ui-view="practiceExamService"></div>

```

and change your ui-router as following :

```
 $stateProvider.state('main', {
  url:'/',
  templateUrl:'views/main.html',
  controller:'MainCtrl'
}).state('practice', {
    url:'/practice',
    templateUrl:'views/practice/practice.html',
    controller:'PracticeCtrl
    }
  }
).state('practice.exam', {
    url:'/{examName}',
    view:{'practice':{ templateUrl:'views/practice/exam.html'}},
    controller:'ExamCtrl'
    }
  }
).state('practice.exam.service', {
      url:'/{serviceName}',
      view:{'practiceExam':{ templateUrl:'views/practice/service.html'}},
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practice.exam.service.competitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      view:{'practiceExamService':{ templateUrl:'views/practice/competitive_sample_paper.html'}},
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practice.exam.service.subject', {
    url:'/{subjectName}',
 view:{'practiceExamService':{  templateUrl:'views/practice/subject.html'}},
       controller:'SubjectCtrl'
  }
)

```
Define Your state like this 

```
$stateProvider.state('main', {
      url:'/',
      templateUrl:'views/main.html',
      controller:'MainCtrl'
    }).state('practice', {
        url:'/practice',
        templateUrl:'views/practice/practice.html',
        controller:'PracticeCtrl
        }
      }
)..state('practiceexam', {
    url:'/{examName}',
    templateUrl:'views/practice/exam.html',
    controller:'ExamCtrl'
    }
  }
).state('practiceexamservice', {
      url:'/{serviceName}',
      templateUrl:'views/practice/service.html',
      controller:'ServiceCtrl',

    }
  )
  .state('practiceexamservicecompetitiveSamplePaper', {
      url:'/{samplePaperNumber}',
      templateUrl:'views/practice/competitive_sample_paper.html',
      controller:'CompetitiveSamplePaperCtrl'
    }
  )
  .state('practiceexamservicesubject', {
    url:'/{subjectName}',
    templateUrl:'views/practice/subject.html',
    controller:'SubjectCtrl'
  }
)

```