Angular’s ng-repeat Finish Event

September 15, 2015



Sometimes you need to execute code after your list has been rendered on the client side.

// js
angular.module('ngRepeatDemo', [])
  .controller('AppCtrl', function() {
    var vm = this;
    vm.alphabet = [
      'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
    vm.finished = function() {
      // now javascript execution has been stopped and you should see all DOM nodes been created
      // note: interpolation may not have been done completely
<!-- html -->
<div ng-repeat="letter in app.alphabet" ng-init="$last && app.finished()">

The whole magic comes from the ng-init part. the $last makes sure, that it only gets fired, when the last element has been rendered to the DOM.

This will also fire whenever the list changes and a change has been issued by the digest cycle.

Simon Wicki

Simon Wicki is a Freelance Frontend Developer in Berlin. Passionate and fluent in Vue, Angular, React and Ionic. Interested in Tech, frontend & non-fiction books

Twitter Follow @zwacky