Take a look at this Plunkr demonstration that showcases the ng-repeat functionality with a JSON file:
Plunkr
The code snippet below shows how I am displaying elements from $scope.foodlist:
<li ng-repeat="food in foodlist">
<p>Title: {{ food.title }}</p>
<p>Code: {{ food.code }}</p>
<p>Unit {{ food.unit }}</p>
</li>
Due to "unit" having a child element named "title", the output appears like this:
Title: Walnußbrot
Code: X 39 2000002
Unit [{"title":"Scheiben"}]
Efforts to access the title of the unit using {{ food.unit.title }} have been unsuccessful. Is there a specific modification needed in the Angular controller to target this nested element?