Javascript 角度数据在加载时间选项卡上未加载

在我的angular应用程序中，我正在从控制器加载数据。我在加载数据时使用不同的选项卡。但当我单击选项卡时，直到我没有单击inspect元素，数据才会显示。这是我的控制器代码

    appControllers.controller('GalleryAppController', ['$scope', function ($scope) {

    $scope.itemsgallery = [
        {
            "name":"Mountains",
            "groups":[
                "nature"
            ],
            "src":"demo/img/pictures/1.jpg",
            "date":"10 mins"
        },
        {
            "name":"Empire State Pigeon",
            "groups":[
                "people"
            ],
            "src":"demo/img/pictures/2.jpg",
            "date":"1 hour",
            "like": true
        },
        {
            "name":"Big Lake",
            "groups":[
                "nature"
            ],
            "src":"demo/img/pictures/3.jpg",
            "date":"2 mins",
            "like": true
        },
        {
            "name":"Forest",
            "groups":[
                "nature"
            ],
            "src":"demo/img/pictures/4.jpg",
            "date":"2 mins",
            "like": true
        },
        {
            "name":"Smile",
            "groups":[
                "people"
            ],
            "src":"demo/img/pictures/5.jpg",
            "date":"2 mins"
        },
        {
            "name":"Smile",
            "groups":[
                "people"
            ],
            "src":"demo/img/pictures/6.jpg",
            "date":"1 hour",
            "like": true
        },
        {
            "name":"Fog",
            "groups":[
                "nature"
            ],
            "src":"demo/img/pictures/8.jpg",
            "date":"2 mins",
            "like": true
        },
        {
            "name":"Beach",
            "groups":[
                "people"
            ],
            "src":"demo/img/pictures/9.jpg",
            "date":"2 mins"
        },
        {
            "name":"Pause",
            "groups":[
                "people"
            ],
            "src":"demo/img/pictures/10.jpg",
            "date":"3 hour",
            "like": true
        },
        {
            "name":"Space",
            "groups":[
                "space"
            ],
            "src":"demo/img/pictures/11.jpg",
            "date":"3 hour",
            "like": true
        },
        {
            "name":"Shuttle",
            "groups":[
                "space"
            ],
            "src":"demo/img/pictures/13.jpg",
            "date":"35 mins",
            "like": true
        },
        {
            "name":"Sky",
            "groups":[
                "space"
            ],
            "src":"demo/img/pictures/14.jpg",
            "date":"2 mins"
        }
    ];

    $scope.activeGroup = 'all';

    $scope.order = 'asc';

    $scope.$watch('activeGroup', function(newVal, oldVal){
        if (newVal == oldVal) return;
        $scope.$grid.shuffle( 'shuffle', newVal );
    });

    $scope.$watch('order', function(newVal, oldVal){
        if (newVal == oldVal) return;
        $scope.$grid.shuffle('sort', {
            reverse: newVal === 'desc',
            by: function($el) {
                return $el.data('title').toLowerCase();
            }
        });
    })
}]);

有什么建议吗

这是我的HTML块

<!--End Scan------------------------------------------------------------------------------------>

              <div ng-tab-body="animated bounceInLeft" class="tab-pane" data-ng-controller="GalleryAppController">
                <div class="filterheader">
                  <div class="col-sm-6 col-xs-6">
                    <menu-directive>
                      <div id="dl-menu" class="dl-menuwrapper">
                        <button type='button' class='btn btn-default cbutton cbutton--effect-boris dl-trigger'><img src="img/Btncategoryfilter.svg" class="svg" width="26" height="26"></button>
                        <span class="btn btn-default" data-ng-class="{'active': activeGroup == 'all'}"
              data-ng-click="activeGroup = 'all'" style="display:none">All</span>
                        <ul class="dl-menu">
                         <li><a href="#">category1</a></span>
                            <ul class="dl-submenu">
                              <li> <a href="#">subcategory1.1</a>
                                <ul class="dl-submenu">
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'people'}"
              data-ng-click="activeGroup = 'people'">subcategory1.1.1</span></</li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'space'}"
              data-ng-click="activeGroup = 'space'">subcategory1.1.2</span></li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'nature'}"
              data-ng-click="activeGroup = 'nature'">subcategory1.1.3</span></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory1.2</a>
                                <ul class="dl-submenu">
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'nature'}"
              data-ng-click="activeGroup = 'nature'">subcategory1.2.1</span></li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'people'}"
              data-ng-click="activeGroup = 'people'">subcategory1.2.2</span></li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'space'}"
              data-ng-click="activeGroup = 'space'">subcategory1.2.3</span></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory1.3</a>
                                <ul class="dl-submenu">
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'space'}"
              data-ng-click="activeGroup = 'space'">subcategory1.3.1</span></li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'nature'}"
              data-ng-click="activeGroup = 'nature'">subcategory1.3.2</span></li>
                                  <li><span class="btn btn-default" data-ng-class="{'active': activeGroup == 'people'}"
              data-ng-click="activeGroup = 'people'">subcategory1.3.3</span></li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                          <li> <a href="#">category2</a>
                            <ul class="dl-submenu">
                              <li> <a href="#">subcategory2.1</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.1.1</a></li>
                                  <li><a href="#">subcategory2.1.2</a></li>
                                  <li><a href="#">subcategory2.1.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory2.2</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.2.1</a></li>
                                  <li><a href="#">subcategory2.2.2</a></li>
                                  <li><a href="#">subcategory2.2.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory2.3</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.3.1</a></li>
                                  <li><a href="#">subcategory2.3.2</a></li>
                                  <li><a href="#">subcategory2.3.3</a></li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </menu-directive>
                    <div class="clearfix"></div>
                  </div>
                  <div class="col-sm-6 col-xs-6">
                    <menu-directive>
                      <div id="dl-menu" class="dl-menuwrapper">
                        <button type='button' class='btn btn-default cbutton cbutton--effect-boris dl-trigger'><img src="img/Btnsort.svg" class="svg" width="26" height="26"></button>
                        <ul class="dl-menu">
                          <li> <span class="btn btn-default" data-ng-class="{'active': order == 'asc'}"
                      data-ng-click="order = 'asc'">Filter1</span> </li>
                          <li> <span class="btn btn-default"  data-ng-class="{'active': order == 'desc'}"
                      data-ng-click="order = 'desc'">Filter2</span> </li>
                        </ul>
                      </div>
                    </menu-directive>
                    <div class="clearfix"></div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              <!--grid-->
              <div class="col-sm-12">
              <div class="row gallery" data-ui-jq="magnificPopup"
         data-sn-gallery data-options="{ itemSelector: '.gallery-item'}"
         data-ui-options="{ delegate: '.thumbnail > a',  type: 'image', gallery: { enabled: true  } }">
        <div data-ng-repeat="itemgallery in itemsgallery"
             class="col-sm-6 col-md-3 gallery-item" data-groups='{{itemgallery.groups}}' data-title="{{itemgallery.name}}">
            <div class="thumbnail">
                <a href="{{itemgallery.src}}"><img data-ng-src="{{itemgallery.src}}" alt="..."></a>
                <div class="caption">
                    <h5 class="mt-0 mb-xs">{{itemgallery.name}}</h5>
                    <ul class="post-links">
                        <li><a href="#">{{itemgallery.date}}</a></li>
                        <li><a href="#"><span class="text-danger"><i class="fa {{itemgallery.like ? 'fa-heart' : 'fa-heart-o'}}"></i> Like</span></a></li>
                        <li><a href="#">Details</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3 js-shuffle-sizer"></div>
    </div>
              <div class="clearfix"></div>
              </div>
              <!--End grid-->

              </div>

              <!--End browse------------------------------------------------------------------------------------>

              <div ng-tab-body="animated bounceInLeft" class="tab-pane">
                <div class="filterheader">
                  <div class="col-sm-6 col-xs-6">
                    <menu-directive>
                      <div id="dl-menu" class="dl-menuwrapper">
                        <button type='button' class='btn btn-default cbutton cbutton--effect-boris dl-trigger'><img src="img/Btncategoryfilter.svg" class="svg" width="26" height="26"></button>
                        <ul class="dl-menu">
                          <li> <a href="#">category1</a>
                            <ul class="dl-submenu">
                              <li> <a href="#">subcategory1.1</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory1.1.1</a></li>
                                  <li><a href="#">subcategory1.1.2</a></li>
                                  <li><a href="#">subcategory1.1.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory1.2</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory1.2.1</a></li>
                                  <li><a href="#">subcategory1.2.2</a></li>
                                  <li><a href="#">subcategory1.2.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory1.3</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory1.3.1</a></li>
                                  <li><a href="#">subcategory1.3.2</a></li>
                                  <li><a href="#">subcategory1.3.3</a></li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                          <li> <a href="#">category2</a>
                            <ul class="dl-submenu">
                              <li> <a href="#">subcategory2.1</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.1.1</a></li>
                                  <li><a href="#">subcategory2.1.2</a></li>
                                  <li><a href="#">subcategory2.1.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory2.2</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.2.1</a></li>
                                  <li><a href="#">subcategory2.2.2</a></li>
                                  <li><a href="#">subcategory2.2.3</a></li>
                                </ul>
                              </li>
                              <li> <a href="#">subcategory2.3</a>
                                <ul class="dl-submenu">
                                  <li><a href="#">subcategory2.3.1</a></li>
                                  <li><a href="#">subcategory2.3.2</a></li>
                                  <li><a href="#">subcategory2.3.3</a></li>
                                </ul>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </menu-directive>
                    <div class="clearfix"></div>
                  </div>
                  <div class="col-sm-6 col-xs-6">
                    <menu-directive>
                      <div id="dl-menu" class="dl-menuwrapper">
                        <button type='button' class='btn btn-default cbutton cbutton--effect-boris dl-trigger'><img src="img/Btnsort.svg" class="svg" width="26" height="26"></button>
                        <ul class="dl-menu">
                          <li> <a href="#">Filter1</a> </li>
                          <li> <a href="#">Filter2</a> </li>
                        </ul>
                      </div>
                    </menu-directive>
                    <div class="clearfix"></div>
                  </div>
                  <div class="clearfix"></div>
                </div>
                search </div>


                 <!--End search------------------------------------------------------------------------------------>

全部的





子类别1.1.1
{{itemgallery.name}





























































搜索

将ng controller=“GalleryAppController”放在您的选项卡中，然后检查

您是否可以提供用于查看的代码以及json更新的逻辑请查看我的编辑问题我已将html代码放在那里。请查看我的编辑问题我已将html代码放在那里。好的。哪个选项卡创建问题？所有选项卡。我在第一次加载时显示所有图像。但它们没有加载。这是你可以通过点击顶部第二个绿色按钮看到的url。控制台显示错误参考错误：Ps未定义，请检查你的js文件并再次测试，但在我的终端控制台上没有显示任何错误。一切正常，只是加载问题。