What I have
===========

I have some data in json format like this:

```
var data = [{id: 1, name="AB", designation=1},
            {id: 2, name="CD", boss= 1, designation=2},
            {id: 3, name="EF", boss= 1, designation=2},
            {id: 4, name="GH", boss= 1, designation=2},
            {id: 5, name="IJ", boss= 2, designation=3},
            {id: 6, name="KL", boss= 3, designation=3},
            {id: 7, name="MN", boss= 3, designation=3},
            {id: 8, name="OP", boss= 7, designation=4},
            {id: 9, name="QR", boss= 3, designation=3},
            {id: 10, name="ST", boss= 1, designation=2}];

var designations = [{id: 1, name: "Principle"},
                    {id: 2, name: "HOD"},
                    {id: 3, name: "Teacher"},
                    {id: 4, name: "Student"}];

```

In the above data notice that boss field is referencing to the same array while designation is referencing to a different array.

What I want
===========

I want to show this data in a table:

```
id | name | boss | designation
---+------+------+------------
 1 | AB   | SUP  | Principle
 2 | CD   | AB   | HOD
 3 | EF   | AB   | HOD
 4 | GH   | AB   | HOD
 5 | IJ   | CD   | Teacher
 6 | KL   | EF   | Teacher
 7 | MN   | EF   | Teacher
 8 | OP   | MN   | Student
 9 | QR   | EF   | Teacher
10 | ST   | AB   | HOD

```

What am I planning
==================

Right now I am showing the above mentioned table using javascript. Now I am planning to learn and implement same example using Angular.js. Is there anything in-built for angularjs to do such things? If not then please tell me how do I do that using javascript?