title: Angular variable i set before above function is complete
body: <p>I wasnt quite sure what to call this question but here is the issue.</p>
  
  <p>I have the following <code>$watch</code>:</p>
  
  <pre><code>    $scope.$watch('academyModules', function (newVal) {
      var i = 1;
      var shouldIUpdate = false;
      if ($scope.isSorted) {
          newVal.forEach(function (y) {
              if (y.sort_number != i) {
                  shouldIUpdate = true;
              }
              i++;
          });
          if (shouldIUpdate) {
              $scope.rearrangeModules();
          }
      }
  }, true);
  
  
  
  $scope.rearrangeModules = function () {
      var currentSortNumber = 1;
      for (var i = 0; i &lt; $scope.academyModules.length; i++) {
          $scope.academyModules[i].sort_number = currentSortNumber;
          if ($scope.academyModules[i].module_id == null) {
              $http({
                  url: api.getUrl('updateCourseSortNumber', [$scope.academyModules[i].id, $scope.academyModules[i].sort_number]),
                  method: "POST",
                  data: {
                      academyCourse: $scope.academyCourse
                  }
              }).success(function (data, status, headers, config) {
              }).error(function (data, status, headers, config) {
  
              });
          }
          else {
              $http({
                  url: api.getUrl('updateSortNumber', null),
                  method: "POST",
                  data: {
                      module: $scope.academyModules[i]
                  }
              }).success(function (data, status, headers, config) {
              }).error(function (data, status, headers, config) {
  
              });
          }
          currentSortNumber++;
      }
  }
  </code></pre>
  
  <p>This is used for when my use drag and drops an item in a list.</p>
  
  <p>This <code>list</code> is collected from an <code>$http</code> request that looks like this:</p>
  
  <pre><code>$http.get(api.getUrl('modulesByAcademy', $scope.current_id))
      .success(function (response) {
          $scope.academyModules = [];
          if (response != "") {
              response.forEach(function (y) {
                  $scope.academyModules.push(y);
              });
          }
          $http.get(api.getUrl('academyCourseByAcademy', $scope.current_id))
              .success(function (response) {
                  if (response != "") {
                      response.forEach(function (y) {
                          $scope.academyModules.push(y);
                      });
                      $scope.academyModules.sort(function (a, b) {
                          return a.sort_number &gt; b.sort_number;
                      });
                  }
                  $scope.isSorted = true;
  
              });
      });
  </code></pre>
  
  <p>basicly what this does it collect two types of the so called <code>modules</code> insert them into a common list and then sort this list.</p>
  
  <p>The reason i have the variable <code>isSorted</code> is to make sure that the <code>watcher</code> function is not called over and over when the list is being created.</p>
  
  <p>This works fine for lists under 10 (mainly because i think the sorting is fast enough) however for bigger lists (say 20 items) the <code>isSorted = 1</code> is called before the list is done generating thus making my system reordering the items in the list in an odd way.</p>
  
  <p>My question is how can i avoid this?</p>