更改angularJS中指令的作用域变量

我对Angular很陌生，遇到了以下问题：

我有一个列表视图和一个带有一些标签的详细信息视图。我创建了一个指令来更改路由（到列表视图），并在单击事件时从服务加载新元素。我想要的是，点击事件还更改了一个范围变量，这样我就可以在列表视图中显示/隐藏一个清除过滤器的按钮。

实际上，我可以从指令中更改变量，但当变量更改时，按钮不会用ngIf/ngShow/ngHide显示/隐藏。

我在指令和控制器中都尝试了$scope.$apply。我尝试从控制器调用toggle函数，并直接在指令中更改变量，但没有成功。

我试着从另一个按钮调用toggle函数，它运行得很好！

这是我的代码：

在这里，我尝试更改指令中的变量和$apply:

.directive('filterTag', function(getFeed, $location) {
    return {
        restrict: 'A',
        controller: 'mainController',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                $location.path('/list');
                scope.filtered = true;
                scope.$apply();
                return getFeed.getTagged(this.text);
            });
        }
    }
})

这是在控制器内部：

$scope.filtered = false;
$scope.toggleFiltered = function() {
    $scope.filtered = !$scope.filtered;
}
$scope.$watch('filtered', function() {
    alert('filtered: ' + $scope.filtered);
});

我使用$watch来确保变量的更改是正确的，无论是从指令还是从切换按钮。

如果应用了过滤器，这是我想要显示/隐藏的按钮（这在列表视图中）：

<button type="button" ng-show="filtered">Clear filter</button>

我试着添加这个按钮来检查我是否遗漏了什么或语法错误，但它非常适合

<button type="button" ng-click="toggleFiltered()">toggle filter</button>

在过去的两天里，我一直在寻找答案，但找不到答案。无法解决我的代码的问题。

此处的工作示例