How to use ng-repeat for nested dictionaries in AngularJs?

Question

I have a dictionary where the value is itself an object. I want to show the entries in a table using ng-repeat .

Here is the dictionary:

{
        'adam': {
            c1: "a",
            c2: "b"
        },
        'amalie': {
            c1: "c",
            c2: "d"
        }
    };

I have visited this question but it talks about simple key-value pairs.

Here is a jsfiddle .

I want it to be shown as:

NAME c1 c2
adam a b
amalie c d

Answer 1

<ul>
    <li ng-repeat="(name, ages) in items">              
        {{name}} 
        <span ng-repeat="age in ages">
            {{age}}
        </span>        
    </li>
</ul>

jsfiddle

Answer 2

<div ng-app ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="(name, age) in items">{{name}}: {{age.c1}} : {{age.c2}}</li>
    </ul>
</div>

use like this...

Answer 3

Check this updated jsFiddle. Hope this helps.

<div ng-app ng-controller="MyCtrl">
    <table>
        <tr>
            <td>Name</td>
            <td>C1</td>
            <td>C2</td>
        </tr>

        <tr ng-repeat="(name, age) in items">
            <td>{{name}}</td>
            <td>{{age.c1}}</td>
            <td>{{age.c2}}</td>
        </tr>

    </table>
</div>

http://jsfiddle.net/5dh0d8nd/2/

Answer 4

It can be like this:

<div ng-app ng-controller="MyCtrl">
    <table style="width:50%">
         <tr>
            <th>NAME</th>
            <th>C1</th>
            <th>C2</th>
         </tr>   
         <tr ng-repeat="(name,age) in items">
            <td>{{name}} </td>
            <td> {{age.c1}}</td>        
            <td> {{age.c2}}</td>
         </tr>
   </table>
</div>
<table style="width:100%">

</table>

See this Fiddle .