Trigger after ng-repeat has finished – Angular

If you need to trigger something after a ng-repeat has finished, you’re in luck. The following custom directive will do exactly that.

In my case I had a third party jQuery plugin that wouldn’t work if I triggered it after a document ready. Because the document ready was fired before the ng-repeat finished loading the data.

Add the directive to the element with the ng-repeat and see magic happen.

Create directive

Add directive to ng-repeat

Watch for the finish

More discussion on Stack Overflow


8 Responses to “Trigger after ng-repeat has finished – Angular”

  1. Anthony Tornambe August 10, 2016 at 9:45 am #

    How to insert this code in my code.

    • Rick August 10, 2016 at 9:45 pm #

      How does your code look like?

  2. Vinayak January 13, 2017 at 3:57 pm #

    what if there are multiple ng-repeat in the template and we want to notify after all of them are render

    • Rick January 25, 2017 at 9:30 am #

      No idea 😀

  3. Oda January 20, 2017 at 1:27 am #

    OMG dude!

    Thank you so much!! I spent some hours until see your solution…. work’s perfectly!

    • Rick January 25, 2017 at 9:27 am #

      You’re welcome!

  4. vishnu October 5, 2017 at 3:36 pm #

    error on line $scope.$on(‘ngRepeatFinished’, function(ngRepeatFinishedEvent) {

    “Uncaught ReferenceError: $scope is not defined”

    Please help!

    • Rick October 5, 2017 at 4:00 pm #

      Make sure you’re passing the scope when declaring the controller

Leave a Reply

Add <code> Some Code </code> by using this tags.