在AngularJS中，只有当鼠标位于特定区域时，如何才能显示按钮？

Question

所以，我有一个带有手风琴组头的表格。在扩展accordion组以查看内部的表单信息之前，您首先看到的是它。目前，我有一个实际上在标题上的按钮，这使得它看起来非常混乱，所以当我的鼠标悬停在它上面时，我希望有一个按钮弹出到标题的一侧。总体而言，端点是有一个按钮在整个标题上移动，如果我把它放在正确的div之外，这似乎是可行的。我不确定应该在哪里使用ng-show或ng-mouseover等。按钮应该仍然在手风琴组的标题范围内，所以它在我点击它之前不会消失。有没有办法做这样的事情？这就是我目前所拥有的：

 <accordion-heading>
          <table>
            <tr>
              <td>
                <div>
                  {{animal.name | uppercase}}
                </div>
              </td>
              <td>{{animal.animal_type}}</td>
              <td>{{animal.lifespan}}</td>
              <td>{{animal.vertebrae}}</td>
              <td ng-click="$event.stopPropagation();  $event.preventDefault(); disableAppointment(animal);" class="">
                <i class="btn btn-primary btn-xs active" ng-class="{'glyphicon glyphicon-remove':animal.apt_disabled,'glyphicon glyphicon-ok':!animal.apt_disabled }">
                </i>
              </td>
              <td ng-show="true"  ng-click="$event.stopPropagation()" class="">
                <a class="btn btn-primary btn-sm active" ng-href="#/owners/{{animal.id}}" target="_blank"><i class="glyphicon glyphicon-home"/></a>
              </td>
              <td ng-show="true"  ng-click="$event.stopPropagation()" class="">
                <a class="btn btn-primary btn-sm active" ng-href="vets/{{animal.id}}" target="_blank"><i class="glyphicon glyphicon-globe"/></a>
              </td>
            </tr>
          </table>
        </accordion-heading>

如您所见，我在标题上放了3个按钮。最后两个按钮，我实际上并不想要它。当有人在它上面盘旋时，我宁愿让它们弹出到标题的左侧（并且可能会将其移动）。

我能找到的最接近我想要的是here但是我喜欢它是按钮而在左边。