无法选择ng-repeat内的元素

Question

在下面的代码段中，我想在点击a内的元素#filters时创建一个事件。
我正在使用AngularJS发出http请求，ng-repeat列出响应数据。

我无法选择#filters具有ng-repeat属性的子元素。我怎么能这样做？

var app = angular.module("thainguyen", []);
app.controller("projects", function($scope, $http) {
  $scope.projects = [];
  $scope.services = [];
  $http.get("/Service/Get").then(function(response) {
    $scope.services = response.data;
  });
  $http.get("/Projects/Get").then(function(response) {
    $scope.projects = response.data;
  });
  $(window).load(function() {
    $('#gallery').css('height', '');
  })
});

/////////////////////////////////////////////////////////////

var $container = jQuery('#gallery');
$container.isotope({
  itemSelector: '.item',
  filter: '*'
});
jQuery('#filters a').on("click", function() {
  var $this = jQuery(this);
  if ($this.hasClass('selected')) {
    return false;
  }
  var $optionSet = $this.parents();
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  var selector = jQuery(this).attr('data-filter');
  $container.isotope({
    filter: selector
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<ul id="filters" class="wow fadeInUp" data-wow-delay="0s">
  <li><a href="#" data-filter="*" class="selected">All Projects</a></li>
  <li ng-repeat="x in services"><a href="#" data-filter=".{{x.Id}}">{{x.Name}}</a></li>
</ul>