更新列表时的角度过滤器行为

Question

我有几个ng-repeat，其中第一个列表中的选定项目通过作为对象的属性过滤第二个列表。然后可以在两个列表中添加项目。这里说明了结构：

<div class="list-container">
    <div class="list-item"
         ng-repeat="class in classList"
         ng-click="setActiveClass(class)">
        {{class.name}}
    </div>
</div>

<div class="input-group">
    <input type="text" ng-model="newClassName">
    <button ng-click="addNewClass()">Add</button>
</div>

<div class="list-container">
    <div class="list-item"
         ng-repeat="item in itemsList | filter:{class: activeClass}">
        {{item.name}}
    </div>
</div>

<div class="input-group">
    <input type="text" ng-model="newItemName">
    <button ng-click="addNewItem()">Add</button>
</div>

和javascript：

.controller('controller', function () {

    $scope.classList = [
        {
            'name': 'Class 1'
        },
        {
            'name': 'Class 2'
        },
        {
            'name': 'Class 3'
        }
    ];

    $scope.itemsList = [
        {
            'name': 'Item 1',
            'class': $scope.classList[0]
        },
        {
            'name': 'Item 2',
            'class': $scope.classList[1]
        },
        {
            'name': 'Item 3',
            'class': $scope.classList[2]
        }
    ];

    $scope.activeClass = {};

    $scope.setActiveClass = function (newActiveClass) {
        $scope.activeClass = newActiveClass;
    };

    $scope.addNewClass = function () {
        var nl = $scope.classList.push({
            'name': $scope.newClassName
        });

        $scope.activeClass = $scope.classList[nl-1];
    };

    $scope.addNewItem = function () {
        $scope.itemsList.push({
            'name': $scope.newItemName,
            'class': $scope.activeClass
        });
    };
});

问题是，当添加新的类项时，第二个列表显示所有项，如果没有过滤器。如果我选择除new之外的任何类，则过滤器按预期工作，但在新的过滤器上，过滤器显示数组中的所有元素。可能会发生什么？