页面加载时没有加载数据。为什么？

Question

当页面加载数据未显示时。但是下一页和上一页正在运行。 我想知道为什么当我第一次运行代码时它没有显示。第一次它没有工作。

在html或角度控制器中是否有任何问题。

当我运行应用程序时，没有加载数据。但是当我单击On Next按钮时，数据被加载。 我的代码出了什么问题？

(function () {
    'use strict';
    var instance;

    TRUCKAPP.SubscriptionDetailsController = function ($scope, employeeFactory, safeApply) {

        instance = this;
        instance.scope = $scope;
        instance.employeeFactory = employeeFactory;
        $scope.pageSizes = [5, 10];
        $scope.activeRequestPage = $scope.pageSizes[0];
      
       
    this.GetSubscriptionDetails();

    $scope.nextRequestPage = function () {
            if (instance.scope.currentPage < instance.scope.numberOfPages) {
                var startrow = (instance.scope.currentPage * instance.scope.numberOfPages);
                var endrow = startrow + instance.scope.pageSize;
                instance.scope.currentPage = instance.scope.currentPage + 1;
                var page = instance.scope.SubscriptionList.slice(startrow, endrow);
                instance.scope.root = { children: page };
                refreshTree(instance.scope.root);
            }
        };

    $scope.previousRequstPage = function () {
            if (instance.scope.currentPage > 1) {
                instance.scope.currentPage = instance.scope.currentPage - 1;
                var endrow = (instance.scope.currentPage * instance.scope.pageSize);
                var startrow = endrow - instance.scope.pageSize;
                if (startrow < 0) {
                    startrow = 0;
                }
                var page = instance.scope.SubscriptionList.slice(startrow, endrow);
                instance.scope.root = { children: page };
                refreshTree(instance.scope.root);
            }
        };
        
        $scope.$watch('currentPage', function (value) {
            
            instance.scope.currentDisplayPage = parseInt(instance.scope.currentPage, 10) +1;
        });

    };
      TRUCKAPP.SubscriptionDetailsController.prototype.GetSubscriptionDetails = function () {

        instance.employeeFactory.GetSubscriptionDetails(function (item) {
            if (!item.error && item.data) {
                instance.scope.SubscriptionList = item.data;
               
                instance.scope.currentPage = 1;
                instance.scope.pageSize = 10;

                if (instance.scope.SubscriptionList.length <= instance.scope.pageSize) {
                    instance.scope.numberOfPages = 1;
                }
                else {
                    var div = Math.floor(instance.scope.SubscriptionList.length / instance.scope.pageSize);
                    var rem = instance.scope.SubscriptionList.length % instance.scope.pageSize;
                    if (rem > 0) {
                        instance.scope.numberOfPages = div + 1;
                    }
                    else instance.scope.numberOfPages = div;
                }
                var page = instance.scope.SubscriptionList.slice(0, instance.scope.pageSize);
                instance.scope.root = { Children: page };
                instance.scope.showGrid = true;
             
                
            }

        }, null, 1, 10);
      

    };
    TRUCKAPP.SubscriptionDetailsController.prototype.numberOfPages = function (data, pagesize) {
        return Math.ceil(data.length / pagesize);
    };
   
    truckApp.controller('SubscriptionDetailsController', ['$scope', 'employeeFactory', 'safeApply', TRUCKAPP.SubscriptionDetailsController]);

})

 <div class="row" style="padding: 10px;">
                    <div class="col-sm-6">
                        <div class="dataTables_length" id="Div1">
                            <label style="display: none;">
                                Show<select name="dataTables-example_length" style="display: inline-block; width: auto; margin-left: 10px; min-width: 60px !important; max-width: 60px !important" aria-controls="dataTables-example" ng-model="activeRequestPage" class="form-control input-sm" ng-options="item for item in pageSizes">
                                </select>
                                entries
                            </label>
                        </div>
                    </div>
                    <div class="col-sm-6" style="display: none;">
                        <div id="Div2" class="dataTables_filter">
                            <label style="padding-top: 0px; margin-bottom: 0px;">
                                Search:<input type="search" style="display: inline-block; width: auto; margin-left: 10px;" class="form-control input-sm" placeholder="" aria-controls="dataTables-example">
                            </label>
                        </div>
                    </div>
                </div>
                    <div id="exportable">
                        <div class="panel-body" style="padding-left: 14px; padding-top: 0px;" ng-show="SubscriptionList.length>0">
                            <div class="dataTable_wrapper"> <!--id="exportable"-->
                                <div role="tabpanel">
                                    <ad-tree-browser class="ad-border-default" ng-if="showGrid"
                                        tree-name="treeDemoBordered"
                                        row-ng-class="{added:item._selected}"
                                        tree-root="root"
                                        child-node="children"
                                        children-padding="0"
                                        bordered="true"
                                        node-header-url="vendor/treebrowser/docs/treeHeaderSubscription.html"
                                        node-template-url="vendor/treebrowser/docs/treebrowserSubscriptionToggle.html"
                                        custom-toggle="true">
                        </ad-tree-browser>

                                </div>
                            </div>
                        </div>
                        </div>
                     <div class="row" ng-show="SubscriptionList.length > pageSize">
                    <div class="col-sm-6">
                        <div style="display: none;" class="dataTables_info" id="Div3" role="status" aria-live="polite">Showing 1 to 3 of 3 entries</div>
                    </div>
                    <div class="col-sm-6">
                        <div class="dataTables_paginate paging_simple_numbers" id="Div4">
                            <ul class="pagination">
                                <li class="paginate_button previous" aria-controls="dataTables-example" tabindex="0" id="Li1" ng-click="previousRequstPage()">
                                    <a>Previous</a>
                                </li>
                                <li class="paginate_button active" aria-controls="dataTables-example" tabindex="0">
                                    <a>{{currentPage}}</a>
                                </li>
                                <li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="Li2" ng-click="nextRequestPage();">
                                    <a>Next</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>