AngularJS Question

angularjs nested ng-repeat function call when finish

I have 2 nested ng-repeat and boolean, which will hide the loading div, but loading div is hiding before all content is rendered. Boolean depends on a callback function which gets all data.

<tr ng-repeat="package in packages track by $index">
<td> {{ pack.Name }}</td>
<select ng-hide="package.spinStart" class="form-control" ng-model="package.selectedVersion">
<option ng-repeat="pack in package.allPackageVersions track by $index"
ng-disabled="!expertModeOn && pack.shouldDissable"
ng-style="!expertModeOn && pack.shouldDissable && {'color':'#ddd'}">

{{pack.NuGetPackageId}} | {{pack.Version}} | {{pack.Published}}

How I call the function when all 2 nested loops are finished?

I tried with Watch statement and directive.
Thanks You!

Answer Source

can you use $last?

<!DOCTYPE html>
<html data-ng-app="myApp">

  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src=""></script>
  <script src="script.js"></script>

<body data-ng-controller="testController">

  <div ng-repeat="package in packages">
    <div ng-repeat=" pkg in package.selectedVersion" ng-init="$last && call()">

      .module('myApp', [])
      .run(function($rootScope) {
        $rootScope.title = 'myTest Page';
      .controller('testController', ['$scope',
        function($scope) {
          $scope.packages = [{
            name: 'test1',
            selectedVersion: [{
              name: 'test_ver1'
            }, {
              name: 'test_ver2'
            }, {
              name: 'test_ver3'
          }, {
            name: 'test2',
            selectedVersion: [{
              name: 'test_ver1'
            }, {
              name: 'test_ver2'
            }, {
              name: 'test_ver3'

          var counter = 0
          $ = function() {
            if (counter == $scope.packages.length) {
              alert("All loops finished");


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download