Javascript函数未定义+弹出窗口

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"  ng-mouseover="getCoords(event)">
    <img class="icon" ng-src="{{ info.icon }}" height="20px" width="20px">

</div> 



<div class="info" id="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>

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

谢谢！

----编辑，添加控制器

app.controller('MainController', ['$scope', function($scope) {

  $scope.timelineEvents = [
  {
    icon: 'icon_dot.png',
    description: ''
  },
  {
    icon: 'icon_dot.png',
    description: ''
  },
  {
    icon: 'icon_dot.png',
    description: ''
  },
    {
    icon: 'icon_dot.png',
    description: ''
  }]

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

}]);