Callback on ng-repeat end

Shows a simple directive that can be used to call a method when ng-repeat ends

by Muhammad Irfan Khan

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="MyCtrl" class="well">
    <h3 ng-repeat="name in names" repeat-end="onEnd()">{{name}}</h3>
</div>

JavaScript

(function () {      

    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);
        
        app.controller("MyCtrl", function($scope, $timeout){
        
            $scope.names = ['Josh', 'Brad', 'Igor', 'Mesko'];
            
            $scope.onEnd = function(){
                $timeout(function(){
                    alert('all done');
                }, 1);
            };
            
        });
        
        app.directive("repeatEnd", function(){
            return {
                restrict: "A",
                link: function (scope, element, attrs) {
                    if (scope.$last) {
                        scope.$eval(attrs.repeatEnd);
                    }
                }
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());