Javascript 更改angular指令中的css属性值

我刚开始学习Angular，我遇到了指令的问题。我想做的是使用AngularJS将一个div的高度与另一个div的高度匹配，并在页面加载时使用动画进行更改。我试图在一个非常简单的指令中实现这一点。以下是我尝试的简化版本：

HTML:

JS:

这是小提琴：

我不明白的是，为什么页面加载时高度没有改变。我直接放在上面的任何代码，如控制台日志等，都在运行中，据我所知，我的语法似乎是正确的。（我知道高度变量被更新为正确的整数，只是css没有改变。即使我将css高度更改为任意随机整数，这也是正确的）

---

我相信对于我做错的事情有一个非常简单的答案，如果能帮我找到正确的方向，我将不胜感激！

将

'px'

连接到最高处

elem.css({
    'height': height + 'px'
});

#match {
    background-color:red;
    height:200px;
}
.timeline {
    background-color:yellow;
    height:40px;
    transition:all linear 0.1s;
}

var app = angular.module('myApp', []);

app.directive('timeline', function ($window) {

    return {
        restrict: 'C',
        link: function (scope, elem, attrs) {
            var height = document.getElementById("match").clientHeight;
            elem.css({
                'height': height
            });
        }
    };
});

elem.css({
    'height': height + 'px'
});