我在使用ng-show加载视频时无法显示div

Question

我试图以横向方式将所有视频加载到一个div中。但是我无法将视频加载到div中，因为下面的div被隐藏了。

任何人都可以就此问题向我提出建议......

<div ng-show="videoSources.length">
                        <video width=176 height=99
                            style="margin-left: 70px; margin-right: 10px;"
                            ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index"
                            controls ng-src="{{videoSource | trustUrl}}">
                        </video>

                        <button style="margin-left: -1041px" ng-disabled="isFirstPage()"
                            ng-click="prevPage()">Previous</button>
                        <button style="margin-left: 977px" ng-disabled="isLastPage()"
                            ng-click="nextPage()">Next</button>
                    </div>

我的HTML：

<div class="container-fluid" ng-controller="videocontroller">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3>
                <b>Video Segment</b>
            </h3>
        </div>
        <div class="panel-body">
                <div ng-show="videoSources.length">
                    <video width=176 height=99
                        style="margin-left: 70px; margin-right: 10px;"
                        ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index"
                        controls ng-src="{{videoSource | trustUrl}}">
                    </video>

                    <button style="margin-left: -1041px" ng-disabled="isFirstPage()"
                        ng-click="prevPage()">Previous</button>
                    <button style="margin-left: 977px" ng-disabled="isLastPage()"
                        ng-click="nextPage()">Next</button>
                </div>
                <div ng-hide="videoSources.length">
                    <a href="#" ng-click='loadVideos()'>Load videos</a>
                </div>

            </div>

        </div>

            </div>

我的js：

app.controller('videocontroller', function($scope) {

  $scope.pageNum = 0;
  $scope.pageSize = 4;
  $scope.isFirstPage = function() {
    return $scope.pageNum === 0;
  };
  $scope.isLastPage = function() {
    return $scope.pageNum >= Math.floor($scope.videoSources.length / $scope.pageSize);
  };
  $scope.prevPage = function() {
    $scope.pageNum--;
  };
  $scope.nextPage = function() {
    $scope.pageNum++;
  };

  $scope.videoSources = [];

  $scope.loadVideos = function() {
    for (var i = 0; i < 6; i++) {
         $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
         $scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4');
         $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
         $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
         $scope.videoSources.push('http://54.88.118.248/Video/Customer_Service.mp4');
         $scope.videoSources.push('http://54.88.118.248/Video/Digital_Hiring.mp4');
    }
  };
})
.filter("trustUrl", ['$sce',
  function($sce) {
    return function(recordingUrl) {
      return $sce.trustAsResourceUrl(recordingUrl);
    };
  }
])
.filter('paginate', function() {
  console.log('creating paginate function', arguments);
  return function(inputArray, pageNumber, pageSize) {
    console.log('paginating', arguments);
    pageNumber = pageNumber || 0;
    pageSize = pageSize || 4;
    if (!Array.isArray(inputArray)) return inputArray;
    return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize);
  };
});