ng-repeat中的$ event每次都不会正确触发

Question

我有一个由ng-repeat lookgin生成的列表，如下所示：

<li ng-repeat='task in tasksList | filter: projectFilter' class="list-element">
    <a id='task-{{$index}}' ng-click="taskDetails($event)">
      <div class="content">
        <div class="name-and-date">
          <span class="task-name">{{task.name}}</span> <span class="due-date">{{task.displayDate}}</span> 
        </div>
        <div class="additional-info">
          <span>{{task.project}}</span>
        </div>
      </div>
      <div id='task-{{$index}}-details'  class="details">
        Lorem ipsum
      </div>
    </a> 
</li>

以及视图控制器中taskDetails的定义：

$scope.taskDetails = function($event) {
    var showDetails = document.getElementById($event.target.id + '-details');
    showDetails.style.display = 'block';
};

由于某种原因，该函数每次都没有捕获<a>元素的id，因此它适用于某些列表行，而在其他行上我收到错误：

TypeError: Cannot read property 'style' of null

有人可以解释为什么会这样吗？

此致