鼠标悬停以ng-repeat显示图像

Question

HTML：

<ul>
  <li ng-repeat="image in files | filter :'image'">
    <div class="file-tag-baloon1" ng-mouseover="hoverImg(image.id)" ng-mouseleave="hoverOut()">
      <span style="width: 200px;">
        <a ng-show="hideHoveredImage==false;" class="hover-title">{{hoverTitle}}
          <img class="hover-image" src="{{hoveredImage}}">
        </a>
      </span>
    </div>
  </li>
</ul>

JS：

$scope.hoverOut = function () {
  $scope.hideHoveredImage = true;
  $scope.hoveredImage = "";
}
$scope.hoverImg = function (id) {
  $scope.hoveredImage = FileService.getFile(json, id);
}

我写了一个函数来在鼠标悬停时移动图像。但问题是如果我有4 {{hoverTitle}}，四倍的悬停图像div出现，我需要每个索引的悬停图像，我也希望它完全位于$scope.hiverTitle的顶部。任何示例或解决方案都会对我有所帮助。