nested sortable angular repeat not populating with $http - angularjs

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

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.

Answer 2

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.