将鼠标悬停在angularjs中弹出显示

Question

<img class="line" src="line_draft.png" height="5px" width="50px">

<div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false" ng-init="infoIsVisible = false"  onmousemove="getCoords(event)">
    <img class="icon" ng-src="{{ info.icon }}" height="20px" width="20px">

</div> 



<div class="info">
    <p ng-show="infoIsVisible">{{ info.description }}</p>
</div>


<style>

    .line {
        margin-bottom: 7px;
        box-shadow: 0 0 0 2px rgba(0,0,0,.05);
    }

    div {
        display: inline;
    }

    .info p {
        background-color: red;
        position: fixed;
        z-index: 100;
    }

</style>

<script type = "text/javascript">

    function getCoords(event) {
        var x = event.clientX + "px";
        var y = event.clientY + "px";
        var infoclass = document.getElementById("info");
        infoclass.style.left = x;
        infoclass.style.top = y;
    }

</script>

这是一个有角度的指令文件。我的错误来自于当我尝试将鼠标悬停在.icon上时出现错误，函数getCoords（）未定义。此外，这是一种在弹出框上显示悬停的智能方法吗？

谢谢！