在角度模板中迭代javascript数组

Question

[{"Header":
{
    "logo_1":"logo","link_1":"Link1(#Section1)","link_2":"Link2(#Section2)","link_3":"Link3(
    #Section3)","link_4":"Link4(#Section4)","link_5":"Link5(#Section5)","link_6":"Link6(#Section6)","link_7"
    :"Link7(#Section7)"
},

"Speaker":
{
    "text_1":"Title","text_2":"Text",
    "speaker1":
        {
            "image":"Image","text_1":"Name","text_2":"Title","text_3":"company"
        },
    "speaker2":
        {
            "image":"Image","text_1":"Name","text_2":"Title","text_3":"company"
        },
    "text_3":"Title",
    "text_4":"Text",
    "clock":"Countdown",
    "link":"Button"
}

}]

我有这样的数组。 我希望它像这样打印：

Speaker
Title
Text
speaker1
    Image
    Name    
    Title
    company
speaker2
    Image
    Name    
    Title
    company 
Title
Text
Countdown
Button

这就是我到目前为止所做的：

 <div ng-repeat="Arr in leftArr"> 
                   <div class="panel panel-default" ng-repeat="(Key, Val) in Arr" >
                        <div class="panel-heading" role="tab" id="heading{{$index}}">
                          <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$index}}" aria-expanded="true" aria-controls="collapse{{$index}}">
                              <i class="fa fa-plus-square"></i>{{ Key }}</a>
                            <span class="pull-right"><a href="#"><i class="fa fa-eye"></i></a><a href="#"><i class="fa fa-cog"></i></a></span>
                          </h4>
                        </div>
                        <div id="collapse{{$index}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{$index}}">
                        <div class="panel-body">
                            <ul class="sub">
                               <li ng-repeat="(menuKey, menuVal) in Val">
                                   {{ menuVal.count }}
                                   <a href="#">
                                       <span ng-repeat="(iKey, iVal) in logoArr"> 
                                            <i class="{{ menuKey == iKey ? iVal : ''; }} || {{ menuKey.indexOf(iKey) > -1 ? iVal : ''; }}">
                                             </i>
                                        </span> 
                                    </span>
                                   {{ menuVal }} </a><span class="pull-right"><a href="#"><i class="fa fa-eye"></i></a><a href="#"><i class="fa fa-cog"></i></a></span>

                                  <div class="panel panel-default"  ng-if="menuVal.count > 1">
                                    <div class="panel-heading" role="tab" id="heading22">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse22" aria-expanded="false" aria-controls="collapse22">
                                          <i class="fa fa-plus-square"></i> {{ menuVal }} </a>
                                         <span class="pull-right"><a href="#"><i class="fa fa-eye"></i></a><a href="#"><i class="fa fa-cog"></i></a></span>
                                      </h4>
                                    </div>
                                    <div id="collapse22" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading22">
                                      <div class="panel-body">
                                        <ul class="sub">
                                             <li ng-repeat="(menuKey1, menuVal1) in menuVal">
                                               <a href="#">
                                                   <span ng-repeat="(iKey, iVal) in logoArr"> 
                                                        <i class="{{ menuKey1 == iKey ? iVal : ''; }} || {{ menuKey1.indexOf(iKey) > -1 ? iVal : ''; }}">
                                                         </i>
                                                    </span> 
                                                </span>
                                               {{ menuVal1 }} </a><span class="pull-right"><a href="#"><i class="fa fa-eye"></i></a><a href="#"><i class="fa fa-cog"></i></a></span>
                                               </li>
                                        </ul>      
                                      </div>
                                    </div>
                                  </div>  
                               </li>
                              </ul>

                            </ul>
                          </div>
                        </div>
                      </div>

问题是，当我迭代它的第二层hirarchy.Its没有正确打印数组值。“标题，发言者”就像一个父类别和标题，发言者内部的文字是儿童。进一步的图像，speaker1内的名字是speaker1的子项等。