JSFiddle - React, Tailwind, and code Playground

by Shaun Scovil

HTML

<div ng-controller="MyController as vm">
  <div ng-repeat="thing in vm.things" on-finish-render>
    {{thing.name}}
  </div>
  <button ng-click="vm.addThing()">
    Add Thing
  </button>
  <button ng-click="vm.removeThing()">
    Remove Thing
  </button>
</div>

JavaScript

angular.module('myApp', [])
  .controller('MyController', MyController)
  .directive('onFinishRender', onFinishRenderDirective)
;

function MyController() {
  var vm = this;
  vm.things = [{name: 'Thing 1'}, {name: 'Thing 2'}];
  vm.addThing = function() {
    vm.things.push({name: 'Thing ' + (vm.things.length + 1)});
  };
  vm.removeThing = function() {
    vm.things.pop();
  };
}

function onFinishRenderDirective($timeout) {
  return {
    restrict: 'A',
    link: function(scope) {
      if (scope.$first === true) {
        window.alert('First thing about to render');
      }
      if (scope.$last === true) {
        $timeout(function() {
          window.alert('Last thing rendered!');
        });
      }
    }
  };
}