Angularjs 在模型更新后不更新 ng-repeat 的视图

我有一个“菜单指令”，​​它拒绝在模型更改时更新 html 视图中的项目。我正在使用带有 for-each 语句的 angular js。这是我将其精简为的最低代码。

该指令：

export function SideNavbarDirective() {
    'ngInject';

    let directive = {
        restrict: 'E',
        templateUrl: 'app/components/sideNavbar/sideNavbar.html',
        scope: {
        },
        controller: SideNavbarController,
        controllerAs: 'vm',
        bindToController: true
    };

    return directive;
}

class SideNavbarController {
    constructor($scope, $timeout) {
        'ngInject';

        $scope.myItems = [
            {
                displayName:"1",
                highlight:true,
            },
            {
                displayName: "2",
                highlight: false,
            },
            {
                displayName: "3",
                highlight: false,
            },
        ];

        $timeout(() => {
            $scope.myItems[0].highlight = false;
            $scope.myItems[1].highlight = true;
            $scope.myItems.length = 2;
            $scope.$apply()
        }, 4000);

    }
}

html：

<div ng-repeat="item in myItems" layout="row">
    <div flex layout="column">
            <div layout="row">
                <span>{{item.displayName | translate}}</span><span flex=""></span><span ng-show="{{item.highlight}}">*</span>
            </div>
    </div>
</div>

初始视图：

1* 
2
3

定时器后：

1* 
2

定时器后的预期结果：

1 
2*

正如你可以看到删除一个项目反映。但是更改数组中对象的内容不会被 angular 注意到。我究竟做错了什么？

编辑：我更新了 HTML 以仅打印 highlight 属性的值。

<div ng-repeat="item in myItems" layout="row">
    <div flex layout="column">
            <div layout="row">
                <span>{{item.displayName | translate}}</span><span flex=""></span><span>{{item.highlight}}</span>
            </div>
    </div>
</div>

现在我得到： 初始视图：

1 true
2 false
3 false

定时器后：

1 false
2 true

所以，现在我得到了预期值。卧槽！问题一定出在 ng-show 表达式上还是什么？我比以往任何时候都更加困惑。