在AngularJS中使用带有数组项的过滤器

Question

我在AngularJS项目中获取数据http.get，如下所示：

  $http.get('data.json')
  .then(function (response){
    $scope.boxes = response.data;
  }).catch(function(response) {
    console.error('Error occurred:', response.status, response.data);
  }).finally(function() {
    console.log("Task Finished.");
  });

我想按类别过滤这些项目：

// Functions - Public
 this.filterByCategory = filterByCategory;
 this.getCategories = getCategories;

  // Functions - Definitions
  function filterByCategory(box) {
    return (this.filter[box.cat1] || noFilter(this.filter))? 'show':'not-click';
  }

  function getCategories() {
    return (self.boxes || []).
    map(function (box) { return box.cat1; }).
    filter(function (box, idx, arr) { return arr.indexOf(box) === idx; });
  }
...

这是我的HTML：

<ul ng-repeat="cat in ctrl.getCategories()">

        <li>
          <input type="checkbox" ng-model="ctrl.filter[cat1]" id='{{$index}}' class='chk-btn styled-checkbox' />
          <label for='{{$index}}'>{{cat}}</label>
        </li>

      </ul>

但是当我点击一个项目时，它选择了所有，而不是相关的类别。问题是什么？