JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-controller="myController">
     <h1>Results <span>{{results.length}}</span></h1>

    <button ng-click="loadResults()">Load results</button>
    <hr />
    <ul id="renderedList">
        <li ng-repeat="result in results" emit-when="{event: 'allRendered', condition: $last}">#{{result.id}} - {{result.name}}</li>
    </ul>
</div>

JavaScript

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

myApp.controller("myController", ['$scope', function($scope){
    var resultsToLoad = [
        {id: 1, name: "one"},
        {id: 2, name: "two"},
        {id: 3, name: "three"}
    ];

    function doneAddingToDom() {
        console.log(document.getElementById('renderedList').children.length);
    }
    
    $scope.results = [];
    
    $scope.loadResults = function(){
        $scope.results = resultsToLoad;
        // If run doneAddingToDom here, we will find 0 list elements in the DOM. Check console.
        doneAddingToDom();
    }
    
    // If we run on doneAddingToDom here, we will find 3 list elements in the DOM.
    $scope.$on('allRendered', doneAddingToDom);
}]);

myApp.directive("emitWhen", function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var params = scope.$eval(attrs.emitWhen),
                event = params.event,
                condition = params.condition;
            if(condition){
                scope.$emit(event);
            }
        }
    }
});
    
angular.bootstrap(document, ['myApp']);