Как я могу сделать дерево с угловым JS и JSON

Question

Мои вопросы могут быть очень легкими для вас, но я новичок в angular.js.

Вот мой JSON:

[{
"Priority": 0,                               //Queue
"Task": "Optimizer",
"Valid": 1,
"Enabled": 1,
"Id": 2,
"Description": "Low",
"Name": "velo",
"Level": 0
},
{
"Priority": 0,                              // Queue
"Task": "Optimizer",
"Valid": -4,
"Enabled": 1,
"Id": 11,
"Description": "",
"Name": "CMYKOptimizer_Queue_1",
"Level": 0 
}, 
{
"Expanded": false,                         //Group1 of queue
"Id": "P3",
"Name": "group",
"Level": 0
},  
{
"Expanded": false,                         //Group2 of queue
"Parent": "P3",
"Id": "P4",
"Name": "Sub",
"Level": 1
},
{
"Priority": 1,                             // child of group2
"Task": "Optimizer",
"Valid": -4,
"Enabled": 1,
"Parent": "P4",
"Id": 4,
"Description": "high",
"Name": "High",
"Level": 2
}, 
{
"Priority": 0,                           //child of group1
"Task": "Optimizer",
"Valid": -4,
"Enabled": 0,
"Parent": "P3",
"Id": 7,
"Description": "EZRF",
"Name": "Sametiuogr",
"Level": 2
  },
]

Как видите, он не очень подходит для моей цели.

Итак, у меня есть таблица, в которой отображаются все очереди подряд.

 <tr ng-repeat="queue in QueuesController.queues" data-depth="{{queue.Level}}" id="{{queue.Id}}" parent="{{queue.Parent}}">
                    <div  ng-hide="{{queue.Level }}">
                        <td ng-hide="{{queue.Expanded  == true}} || {{queue.Expanded == false}}">

                            <p style="padding-left : {{queue.Level * 20 }}px;" ng-model="queue.Name">{{queue.Name + ' ' + queue.Id}}</p>
                        </td>
                        <td ng-show="{{queue.Expanded  == true}} || {{queue.Expanded == false}}" colspan="5">
                            <span ng-show="!angular.isUndefined({{queue.Expanded}})" style="padding-left : {{queue.Level* 20}}px;">
                                <span ng-show=" {{queue.Expanded == false}} "  class="glyphicon glyphicon-circle-arrow-right"></span>
                                <span ng-show=" {{queue.Expanded == true}} " class="glyphicon glyphicon-circle-arrow-down"></span>
                            </span>
                            {{queue.Name + ' ' + queue.Id}}
                        </td>
                        <td class="text-center" ng-hide="('{{queue.Expanded}}') == 'true'  || ('{{queue.Expanded}}') == 'false'">
                            <select style="height: 100%;width: 100%;" onclick="stopRefresh()">
                                <option value="-1" ng-selected="{{queue.Priority == -1}}" >Low</option>
                                <option value="0" ng-selected="{{queue.Priority  == 0}}" >Normal</option>
                                <option value="1" ng-selected="{{queue.Priority == 1}}" >High</option>
                                <option value="2" ng-selected="{{queue.Priority == 2}}" >Very High</option>
                            </select>
                        </td>
                        <td class="text-center" ng-hide="('{{queue.Expanded}}') == 'true'  || ('{{queue.Expanded}}') == 'false'" ><input type="checkbox" ng-checked="{{queue.Enabled}}"  name="checkbox" style="height: 100%;width: 100%;"></td>
                        <td class="text-center" ng-hide="('{{queue.Expanded}}') == 'true'  || ('{{queue.Expanded}}') == 'false'" >
                            <div ng-hide="('{{queue.Expanded}}') == 'true'  || ('{{queue.Expanded}}') == 'false'">
                                <span  ng-show="{{queue.Valid == 0}}" class="glyphicon glyphicon-question-sign queuesign orange"></span>
                                <span  ng-show="{{queue.Valid == 1}}" class="glyphicon glyphicon-ok-sign queuesign green"></span>
                                <span  ng-show="{{queue.Valid < 0 }}"  class="glyphicon glyphicon-remove-sign queuesign red" ></span>
                            </div>
                        </td>
                        <td ng-hide="{{queue.Expanded  == true}} || {{queue.Expanded == false}}">{{queue.Description}}</td>
                    </div>
                </tr>

И это мой контроллер, где я просто получаю и сохраняю свой JSON в store.queues:

app.controller('QCtrl',['$http','$interval','$scope', function($http, $interval,$scope){
    this.queues = queue;
    var store = this;
    store.queues = [];
    var queue = [];


$http.get('/queue/info').success(function(data) {
    store.queues = data;
    });
}]);

У меня вопрос: как я могу заставить мою дочернюю очередь появляться и исчезать, когда я нажимаю на родительскую строку? Надеюсь, мне все ясно. Спасибо