AngularJS, get element by dynamic id?

I am using ng-repeat to build an unordered list. I am doing it like so:

<li id="listItem{{$index}}" ng-repeat="slide in data" ng-click="setActive(slide.slideIndex,$event)">
    <span class="listItemText">
    <b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
  </span>
</li>

I am giving each <li> a dynamic ID of listItem0, listItem1, listItem2,.... etc. I need to get that element in my controller. I've been trying to use angular.element() but I can't get it work for the life of me.

The reason I need that element is because at certain events, I need my animation library (TweenLite) to auto scroll to that position. You are allowed to pass an element to TweenLite like so:

$scope.setActive = function(id, event)
{
    $scope.currentIndex = id;
    if (event) player.currentTime = $scope.data[id].time;
    if ($scope.autoScroll)
    {
        var target = document.getElementById("listItem" + id);
        TweenLite.to(slideList,0.5,{scrollTo:{y:target}});
    }
}

The problem is target always returns null. If I put target inside an angular.element() I get a giant object and no reference to the actual <li> (that I was able to find).

What am I doing wrong here and/or should I come at this differently? Thanks.

EDIT

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            $scope.$apply(function()
            {
                $scope.setActive(key);
            });     
        }
    });
});