nested sortable angular repeat not populating with $http

Question

I'm an angular newby, and I'm trying to produce a sortable array within another sortable array using ng-sortable. When I get the data directly from a javascript file it works fine, but when I use $http to retrieve the same data, only the non-repeating data displays - I don't get any error, but the repeaters don't display at all.

Controller with test data (which works):

angular.module('demoApp').controller('TestController', function ($scope, TestService, TestDataFactory) {

    $scope.testData = TestService.getTestData(TestDataFactory.Data);

});

Controller with $http:

angular.module('demoApp').controller('TestController', function ($scope, $http, TestService) {

    $http.get('test/Index')
        .success(function (data) {
            $scope.testData = TestService.getTestData(data);
        })
        .error(function (data) {
            alert("Error getting test data");
        });

});

View:

<h1 class="dataname">{{data.name}}</h1>
<div ng-model="testData" id="test" ng-controller="TestController">
    <div as-sortable="sectionSortOptions" ng-model="testData.sections">
        <div class="section" ng-repeat="section in testData.sections" as-sortable-item ng-include="'test/Section'">
        </div>
    </div>
</div>

Test/Index returns a string of the same format as TestDataFactory.Data, and the object returned by TestService.getTestData() (which is just a data formatter) in each case is identical.

Am I missing something?

Edit:

Seems my problem is to do with the fact that my ng-include has another ng-sortable within it - here's a flattened view of the whole thing:

<h1 class="dataName">{{testData.name}}</h1>
    <div as-sortable="sectionSortOptions" ng-model="testData.sections">
        <div class="section" ng-repeat="section in testData.sections" as-sortable-item>
            <span class="section-sortOrder" as-sortable-item-handle>Section {{section.sortOrder}}</span>
            <div as-sortable="itemSortOptions" ng-model="section.items">
                <div class="item" ng-repeat="item in section.items" as-sortable-item>
                            <div as-sortable-item-handle>
                                <span class="itemName">{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

If I comment out the the line:

<div as-sortable="sectionSortOptions" ng-model="documentPack.sections">

And the associated as-sortable-item-handle (plus the closing div tag) then I get the sortable items in the sections (but not, obviously, the section-level sortability).

Plunker here: http://plnkr.co/edit/CNLVmlGjPvkcFKRo7SjN?p=preview - uses $timeout to simulate $http ($timeout caused the same problem) but now working as it uses latest ng-sortable (see answer).

Answer 1

OK, seems the problem was with the version of ng-sortable I had - version number was labeled 1.2.2 (same as current version), but it didn't have the latest fixes (since 15th June - so, all of 15 days ago). Not sure how unlucky I am to have hit the (probably tiny) window when this problem was there, but I'll post this as answer just in case someone else hits similar behaviour with an early-June-2015 version.

Answer 2

I think this is your problem:

    .success(function (data) {
        $scope.testData = TestService.getTestData(data);
    })

It should be

.success(function(data){
    $scope.testData = data;
})

The success function is called when the promise is resolved, so if you do

$scope.testData = TestService.getTestData(data);

You are probably doing another remote call just as the first one finishes, and your page will never load anything.

Also, I suggest you read the documentation for ngResource as it will probably be useful in whatever you're doing.

It's not a good practice to use $http calls in your controllers, as you're coupling them with your remote calls, server addresses, and lots of other stuff that should be in another configuration files.