ui-view显示首次单击选项卡时的数据，但无法在后续点击中加载相同的数据

Question

我正在使用angular 1.5。我正在尝试加载两个名为roles.html和applications.html的模板。首次单击应用程序选项卡或导航栏中的角色选项卡时会加载页面，但在后续单击时会失败。我的HTML代码如下：                                          应用                     

角色

                  

              <div class="tab-content">
                <div id="applications" class="tab-pane fade in active">
                  <h3>Applications</h3>
                  <p>
                    <div class="panel-body">
                        <div ui-view="applications"></div>
                    </div>
                  </p>
                </div>
                <div id="entitlements" class="tab-pane fade">
                  <h3>Entitlements</h3>
                  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div id="roles" class="tab-pane fade">
                  <h3>Roles</h3>
                  <p> 
                    <div class="panel-body">
                        <div ui-view="roles"></div>
                    </div>
                 </p>
                </div>
              </div>

我的路线包括：

        .state('app.userDetails.access',{
        views: {
            'roles': {
                templateUrl: '/app/components/Profile/Roles/roles.html'
            }
            ,
             'applications': {
                templateUrl: '/app/components/Profile/Applications/applications.html'
             }
        }
    })