Sự kiện render html hoàn thành trong angular

Khi lập trình ứng dụng angular với nghiệp vụ sau khi render html với repeat hoàn thành, cần gọi 1 sự kiện trong angular

<div ng-app="App" ng-controller="indexController">   
    <div id="main" auto-scroll>
       <div ng-repeat="row in list" on-finish-render>
           <p>{{row}}</p>
       </div>
    </div>   
    <button ng-click="click()">Load more</button>   
</div>

 <script>

var app = angular.module('App', []);

app.directive('onFinishRender', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

app.directive('autoScroll', function() {
    return {
        link: function(scope, element) {
            scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
                element[0].scrollTop = element[0].scrollHeight;
            });
        }
    };
});

app.controller('indexController', function($scope) {
    
    $scope.list = ['one', 'two', 'three', 'four'];

    $scope.click = function() {
        var newdata = ['five', 'six', 'seven'];
        angular.forEach(newdata, function(v) {
            $scope.list.push(v);
        });
    };
});

</script>