Showing JSON-data in 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:

1. Each value (like "val1" and "val2" etc.) should be displayed. Therefore i use ng-repeat.
2. 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.