Nested ng-repeat
It's better to have a proper JSON format instead of directly using the one converted from XML.
[ { "number": "2013-W45", "days": [ { "dow": "1", "templateDay": "Monday", "jobs": [ { "name": "Wakeup", "jobs": [ { "name": "prepare breakfast", } ] }, { "name": "work 9-5", } ] }, { "dow": "2", "templateDay": "Tuesday", "jobs": [ { "name": "Wakeup", "jobs": [ { "name": "prepare breakfast", } ] } ] } ] }]This will make things much easier and easy to loop through.
Now you can write the loop as -
<div ng-repeat="week in myData"> <div ng-repeat="day in week.days"> {{day.dow}} - {{day.templateDay}} <b>Jobs:</b><br/> <ul> <li ng-repeat="job in day.jobs"> {{job.name}} </li> </ul> </div></div>
If you have a big nested JSON object and using it across several screens, you might face performance issues in page loading. I always go for small individual JSON objects and query the related objects as lazy load only where they are required.
you can achieve it using ng-init
<td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'> {{s.name}} <div class="presenterClass" ng-repeat="p in presenters"> {{p.name}} </div></td> The code on the controller side should look like below
$scope.getPresenters = function(id) { return SessionPresenters.get({id: id});};While the API factory is as follows:
angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) { return $resource('api/session.Presenters/:id', {}, { 'query': { method: 'GET', isArray: true}, 'get': { method: 'GET', isArray: true }, 'update': { method:'PUT' } }); });