When rendering data, the front-end often encounters some operations after the completion of data rendering. In recent days, the front-end has been encountering clicking and selecting operations after the completion of list and table rendering. For angularjs to deal with such problems, the best way is to direct the instruction.

First, define the instructions:

app.directive('onfinishrenderfilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {    //Determine whether it is the last data
                $timeout(function () {
                    scope.$emit('ngRepeatFinished'); //Father level scope Delivery ngRepeatFinished command
                });
            }
        }
    };
});

Second, after the instruction is defined, you need to add the instruction to the iteration tag, here is the < tr > tag

<div class="fixed-table-container" style="margin-right: 0px;">
    <table class="table table-hover lamp-table">
        <thead>
        <tr>
            <th></th>
            <th style="text-align: center; " data-field="name_device-id" tabindex="0"
                ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
                <div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
                </div>
                <div class="fht-cell" style="width: 101px;"></div>
            </th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
            <td><input data-index="0" name="btSelectItem" type="radio"
                       value="{{$index}}" ng-click="selectInput($index)"></td>
            <td class="nameId0">{{$index+1}}</td>
            <td class="nameId1">{{i.geoZoneName}}</td>
            <td class="nameId2">{{i.description}}</td>
            <td class="nameId3">{{i.totalNumberOfMembers}}</td>
            <td class="nameId4">{{i.country}}</td>
            <td class="nameId5">{{i.lastUpdateDate}}</td>
        </tr>
        </tbody>
    </table>
</div>

Finally, after the last data is rendered, $emit is used to send events (commands) to the parent scope, and $broadcast is used to send events (commands) to the child scope. And $scope.$on() is to listen for events. Listen for whether $emit or $brodercast will send back the events (commands). If the events have been sent back, it means that the data has been rendered, and other operations can be performed later.   

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    var btnList = $("input[name='btSelectItem']");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});

When there is no angularjs, it is generally determined whether the page is loaded by listening to the onload event. However, when using angularjs to render the page, onload event can not guarantee whether angularjs has finished rendering the page. The most common case is to use angularjs to load a data Table. We have to wait until the Table is loaded to operate on the data on the Table. But because the Table is rendered by angularjs, we have to find a way to get the events after the rendering of angularjs. This is one of the reasons why the onload event does not execute data refresh on the angularjs framework. Because the page has been loaded, the onload event determines that the page has not changed, so it does not execute!