angularjs - nested sortable angular repeat not populating with $http -

i'm angular newby, , i'm trying produce sortable array within sortable array using ng-sortable. when data directly javascript file works fine, when use $http retrieve same data, non-repeating data displays - don't error, repeaters don't display @ all.

controller test data (which works):

angular.module('demoapp').controller('testcontroller', function ($scope, testservice, testdatafactory) {      $scope.testdata = testservice.gettestdata(testdatafactory.data);  }); 

controller $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 string of same format testdatafactory.data, , object returned testservice.gettestdata() (which data formatter) in each case identical.

am missing something?

edit:

seems problem fact ng-include has ng-sortable within - here's flattened view of 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 comment out the line:

<div as-sortable="sectionsortoptions" ng-model="documentpack.sections"> 

and associated as-sortable-item-handle (plus closing div tag) sortable items in sections (but not, obviously, section-level sortability).

plunker here: http://plnkr.co/edit/cnlvmlgjpvkcfkro7sjn?p=preview - uses $timeout simulate $http ($timeout caused same problem) working uses latest ng-sortable (see answer).

i think problem:

    .success(function (data) {         $scope.testdata = testservice.gettestdata(data);     }) 

it should

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

the success function called when promise resolved, if

$scope.testdata = testservice.gettestdata(data); 

you doing remote call first 1 finishes, , page never load anything.

also, suggest read documentation ngresource useful in whatever you're doing.

it's not practice use $http calls in controllers, you're coupling them remote calls, server addresses, , lots of other stuff should in configuration files.