Angular variable i set before above function is complete

Question

I wasnt quite sure what to call this question but here is the issue.

I have the following $watch:

    $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 < $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++;
    }
}

This is used for when my use drag and drops an item in a list.

This list is collected from an $http request that looks like this:

$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 > b.sort_number;
                    });
                }
                $scope.isSorted = true;

            });
    });

basicly what this does it collect two types of the so called modules insert them into a common list and then sort this list.

The reason i have the variable isSorted is to make sure that the watcher function is not called over and over when the list is being created.

This works fine for lists under 10 (mainly because i think the sorting is fast enough) however for bigger lists (say 20 items) the isSorted = 1 is called before the list is done generating thus making my system reordering the items in the list in an odd way.

My question is how can i avoid this?

Answer 1

It looks like you are using the wrong compare function for your sort, try

return a.sort_number - b.sort_number;

instead.