AnguarJS - Nested Array Empty when Accessed - angularjs

Question

I'm going nuts!
My server responds with some JSON at an endpoint. It's something like this:
[{
key: 'value'
nested: [{
key: 'value'
]}
}]
If I access that endpoint directly in my browser, I can confirm I get this properly structured JSON object (from Laravel).
My AngularJS app accesses it like normal:
$http.get('endpoint').success(function(data){
$scope.datas = data;
});
Here's the problem : My object in AngularJS the nested array is always empty unless I return my JSON as a single object instead of an array like this:
{datas: [{
key: 'value'
nested: [{
key: 'value'
]}
}]}
In AngularJS, I can now see the nested array. but wait, if I try to access it like
ng-repeat(data in datas.datas)
It's empty again!.
Here's the Javascript/HTML:
<div ng-repeat="order in orders">
<div ng-repeat="message in order.messages">[[ message.value ]]</div>
</div>
msmService.controller('ordersCtrl', ['$scope', '$http',function($scope, $http){
var refresh = function(){
$http.get('/admin/service/orders').success(function(data){
$scope.orders = data;
});
};
refresh();
});

Answer 1

I rearranged some things and hope this example is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.orders = {
datas: [
{
key: 'value',
nested: [
{
key: 'nestedValue'
}
]
}
]
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="order in orders.datas">
{{order.key}}
<div ng-repeat="message in order.nested">{{message.key}}</div>
</div>
</div>