如何在angularjs中配置子状态

Question

现在我正在尝试使用stateProvider来嵌套视图。但没有成功。 JS代码：

$stateProvider
  .state('accountsetting',{
    url: '/account', 
    templateUrl: 'settings/account.html'
  })
  .state('accountsetting.security', {
    url: '/security', 
    templateUrl: 'settings/security/security.html'
  })
  .state('accountsetting.personalinformation', {
    url: '/personalinfo', 
    templateUrl: 'settings/personalinfo/personal-information.html'
  })
  .state('accountsetting.receiptemails', {
    url: '/emails', 
    templateUrl: 'settings/receiptemail/receipt-email.html'
  })
  .state('accountsetting.personalcard', {
    url: '/personalcards', templateUrl: 'submitter/PersonalCard/Personalcard.html'
  });

的index.html：

    <ul>
     <li><a ui-sref='accountsetting'>account</a></li>
     <li><a ui-sref='reports'>Reports</a></li>
    </ul>
    <div ui-view></div>

account.html：

<div class='seetingtabs'>
        <ul>
            <li><a ui-sref='accountsetting.personalinformation'>Personal Information</a></li>
            <li><a ui-sref='accountsetting.security'>Security</a></li>
            <li><a ui-sref='accountsetting.receiptemails'>Receipt Emails</a></li>
            <li><a ui-sref='accountsetting.personalcard'>Personal Cards</a></li>
        </ul>
    </div>
<div ui-view></div>

我可以从索引页面访问帐户页面，但我无法访问帐户设置的子状态，account.html的ui-view对我不起作用。