使用超时的指令不等待动画完成

Question

此使用$ timeout服务的“ focusMe”指令不等待我的模态完成加载，因此动画不稳定。输入框应自动聚焦，以便用户不必单击框（或按Tab键）即可输入其徽章编号。

我尝试做自己的hacky修复，并在网上找到了两个人们说对他们有用的指令。我已经包括了in this plnkr

这是坏掉的指令：

signout.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        // scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
}]);

以下是此问题的可视化结果：

Choppy

Smooth

我想要的结果是等待动画完成的指令，然后立即将焦点放在输入字段上以方便输入。