无法从$timeout更新视图

我正在加载一个包含3个可折叠面板的页面,所有面板都包含一个网格。

var component = {
    bindings: {
        configurationMigrationLogs: '<'
    },
    template: require("./reMigrationConfiguration.template.html"),
    controller: ControllerFn,
    controllerAs: 'vm'
};
ControllerFn.$inject = ['$timeout'];
function ControllerFn($timeout) {
    const vm = this;
    vm.isCardOpen = true; //Does work.
    $timeout(function (vm) {            
        vm.isCardOpen = false; //Doesn't work.
        console.log(vm);
    }, 3000, true, vm);
}

export default function (app) {
    app.component('reMigrationConfiguration', component);
}

然而,当我试图在 $timeout 功能,它不工作。 我可以看到 vm.isCardOpen 但该小组仍在扩大。

<re-card is-collapsed="true" is-open="vm.isCardOpen" ng-repeat="configurationMigrationLog in vm.configurationMigrationLogs">
<!--grid code here-->
</re-card>

re-card组件是在这个.js中设置的:

 (function() {
    'use strict';

    angular.module('app.components')
        .directive('reCard', directiveFn);

    directiveFn.$inject = ['$timeout'];
    function directiveFn($timeout) {

        var directive = {
            restrict:'EA',
            scope:true,
            priority:10,
            controller:controllerFn,
            transclude:true,
            controllerAs:'reCard',
            template: '<div>' +
                '<div re-blocked="isBlocked" re-loading="isBusy"> ' +
                '<div class="grid simple fadeIn animated" ' +
                'ng-class="{collapsible:isCollapsible, \'is-open\':!isCollapsed }" ' +
                're-transclude></div>' +
                '</div></div>',
            link:{
                pre:preLinkFn,
                post:postLinkFn
            }
        };

        return directive;

        function preLinkFn(scope, ele, attrs) {
            if (attrs.isCollapsed) {
                scope.isCollapsed = scope.$eval(attrs.isCollapsed);
                scope.isCollapsible = attrs.isCollapsed;
                scope.isOpen = scope.$eval(attrs.isOpen);
            }

        }

        function postLinkFn(scope, ele, attrs, ctrl) {
            var blockWatcher, obsv;

            scope.isBusy = false;

            if (attrs.notifyOfToggle) {
                ctrl.registerNotifyOfToggle(attrs.notifyOfToggle);
            }

            if (attrs.isBlocked) {
                blockWatcher = scope.$parent.$watch(attrs.isBlocked, function(val) {
                    scope.isBlocked = val;
                });
            }

            if (attrs.hasOwnProperty('isBusy')) {
                obsv = attrs.$observe('isBusy', function(val) {
                    if (val && scope.$eval(val)) {
                        scope.isBusy = true;
                    }
                    else {
                        scope.isBusy = false;
                    }
                });
            }

            scope.$on('destroy', function() {
                blockWatcher();
            });

            attrs.$observe('isOpen', function(val) {
                if (typeof(val) !== 'undefined') {
                    ctrl.toggleCollapsed(!scope.$eval(val));
                }
            });
        }
    }

    controllerFn.$inject = ['$scope'];
    function controllerFn($scope) {

        var notifyOfToggle = null;

        this.getScope = function() {
            return $scope;
        };

        this.toggleCollapsed = function(val) {
            if (typeof($scope.isCollapsed) !== 'undefined') {
                if (angular.isDefined(val)) {
                    $scope.isCollapsed = val;
                } else {
                    $scope.isCollapsed = !$scope.isCollapsed;
                }
                if (notifyOfToggle) {
                    $scope.$eval(notifyOfToggle);
                }
            }
        }; 

        this.registerNotifyOfToggle = function(notifyOfToggleFromAttrs) {
            notifyOfToggle = notifyOfToggleFromAttrs;
        };
    }

})();