数据绑定如何在AngularJS的过滤器中工作？

Question

This is my button

<button ng-repeat="item in data" ng-click="selectCategory(item)">{{item}</button>

And this is my controller

.controller("productListCtrl", function ($scope) {
    let selectedCategory = null;

    $scope.selectCategory = function (item) {
        selectedCategory = item;
    };
    $scope.categoryFilterFn = function (product) {
        return selectedCategory == null || product.category == selectedCategory;
    }
});

I have created method categoryFilterFn for filter filter and I use it in other part of my code

 <div ng-repeat="item in data| filter:categoryFilterFn" class="well">

so I use filter for this div. When the page is loaded first time filter is working, but when I click button it goes to selectCategory() function and changes the value of selectedCategory variable(which is not even a $scope property, just a variable). After that angular filters the ng-repeat again. I want to understand why ? I understand that my variable selectedCategory is used in categoryFilterFn function (which is filter), but does it mean that every change of it will cause new rendering ?

Answer 1

In angularjs in every change detection filter gets executed. When you are invoking $scope.selectCategory function angular internally run the digest cycle and firing events to identify the changes happening in the scope. So each digest cycle or change detection filters are gonna fire again.