AngularJS - DropDown菜单无法正常使用ng repeat

Question

我正在使用Foundation 5来创建下拉导航。导航正在使用ng-repeat创建，输入来自JSON文件。

基本上一切正常，但是当我的栏上有三个级别并且我想打开最后一级时，我想点击第二级，当鼠标离开时菜单不会消失。在基础的标准代码中，这工作正常，但为什么它不能与ng-repeat一起使用？

我创建了一个Plunker - 首先是我的导航菜单，然后是基础的标准菜单，你可以点击一个子级，当鼠标离开时菜单不会出现。

https://plnkr.co/edit/gZCtMrMRXOD0DnjMqId5?p=preview

这是我的代码：

<section class="top-bar-section">             
      <ul class="left">
        <li class=""></li>
        <!-- Start Navigation 1. Level -->
        <li ng-class="{'has-dropdown':navigation.type === 'Sub', 'nav_button':navigation.type === 'Main'}" ng-repeat="navigation in nav.links">
          <a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="">{{navigation.name}}</a>
          <a ng-if="navigation.type == 'Sub'" href="#" class="">{{navigation.name}}</a>

          <!-- Start Navigation 2. Level -->
          <ul ng-if="navigation.type == 'Sub'" class="dropdown">             
            <li ng-class="{'has-dropdown':subitem.type === 'Sub', 'nav_button':subitem.type === 'Main'}" ng-repeat="subitem in navigation.subitems">
              <a ng-if="subitem.type == 'Main'" href="{{subitem.link1}}" class="">{{subitem.name2}}</a>
              <a ng-if="subitem.type == 'Sub'" href="#" class="">{{subitem.name2}}</a>

              <!-- Start Navigation 3. Level -->
              <ul ng-if="subitem.type == 'Sub'" class="dropdown">             
                <li ng-repeat="subitem in subitem.subitems2"><a href="{{subitem.link}}">{{subitem.name3}}</a></li>
              </ul> 
            </li>
          </ul> 
        </li>
      </ul>
    </section>

奇怪的是，当我设置选项'data-options="is_hover: false"'时，它的工作原理 - 但我的情况下需要悬停效果。

有人建议我解决这个问题吗？