How to make nested views on multiple views in angular ui router?

Question

My app is very simple. i have a home page that contains header and body. in body section I want to show login page and if URL changed to 'password/forget' I show password reset form. my templates:

index.html :

<header ui-view="header">
</header>
<div class="container-fluid">
    <div class="row">
        <div ui-view="main">
        </div>
    </div>
</div>

home.html:

   <div ui-view>
    </div>

And ui-router config is this:

 $locationProvider.html5Mode({enabled: true, requireBase: false});
 $stateProvider.state('home', {
     url: '/',
     views: {
       'header': {
         templateUrl: '/header.html'
       },
       'main': {
          templateUrl: '/home.html'
       }
 }
 }).state('home.forgetPassword', {
    url: '/password/forget',
    templateUrl: '/forgetPassword.html',
});

Now when I go "/password/forget" anything happen and index.html is showing. I want to show forgetPassword.html when route changes to "/password/forget" .

Answer 1

Problem solved. it was for / in parent state and repeat it on child states.