Angularjs ui视图在第一次单击选项卡时显示数据，但在后续单击时无法加载相同的数据

我正在使用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'
             }
        }
    })