Showing JSON-data in AngularJS - angularjs

Question

This is how my JSON-data looks like:
var data = [
"val1":[
{"DATE":a1, "HEADER":b1, "MESSAGES":c1},
{"DATE":a2, "HEADER":b2, "MESSAGES":c2},
{"DATE":a6, "HEADER":b6, "MESSAGES":c6},
],
"val2":[
{"DATE":a5, "HEADER":b5, "MESSAGES":c5},
{"DATE":a8, "HEADER":b8, "MESSAGES":c8},
],
"val3":[
{"DATE":a3, "HEADER":b3, "MESSAGES":c3},
{"DATE":a4, "HEADER":b4, "MESSAGES":c4},
{"DATE":a7, "HEADER":b7, "MESSAGES":c7},
],
];
Now I want to use this data in html. Therefore I use AngularJS (although this is an old framework). The data is correctly sended to the client side but now I have to display it correctly. I already have this:
<ul>
<li class="message" ng-repeat="messages in data">
{{ messages }}
</li>
</ul>
Now it's showing all the data (which isn't my goal). It should be like this:
Each value (like "val1" and "val2" etc.) should be displayed. Therefore i use ng-repeat.
But now I also want to show the data inside. I thought that I could make another ng-repeat to display all the values of the arrays inside "val1" etc.
But how could I do this and have access to those values?

Answer 1

This HTML should display every item inside val1 array, val2 array and so on:
<ul>
<li class="message" ng-repeat="messages in data">
<span ng-repeat="item in messages">
{{ item }}
<span>
</li>
</ul>
The line <li class="message" ng-repeat="messages in data"> will repeat 1'st level arrays inside data array, and
<span ng-repeat="item in messages">
{{ item }}
<span>
will iterate and display every 2'nd level item, such as {"DATE":a1, "HEADER":b1, "MESSAGES":c1} and so on.