Running a Callback Function After ng-repeat Finishes Rendering in AngularJS

AngularJS has no built-in feature for running a callback function after the DOM has finished rendering. You have to build it yourself.

1. Create a custom directive

When the DOM is rendered, it signals that the last element of the ng-repeat has been reached.

angular.module('MyApp').directive('emitLastRepeaterElement', function() {
    return function(scope) {
        if (scope.$last){
            scope.$emit('LastRepeaterElement');
        }
    };
});

2. Register the custom directive

Register emit-last-repeater-element wherever the ng-repeat is attached.

<div ng-controller="ctrl">
    <div ng-repeat="data in datas" emit-last-repeater-element>
        <span></span>
    </div>
</div>

3. Register the callback function

Register the callback function to run when the custom directive emits the event.

// ctrl
$scope.$on('LastRepeaterElement', () => {
    $timeout(() => console.log('good to go');, 0);
});

4. Wrapping up

I built this by referring to the two articles below, but for some reason it only worked correctly when I combined the methods from both of them. Using AngularJS has become a headache by now. Anyway, it works fine.

Done!

References

• https://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/
• https://www.linkedin.com/pulse/20140822090331-106754325-execute-code-after-ng-repeat-renders-the-items/