changing css attribute value in angular directive

I"m just starting to learn Angular, and I'm running into a problem with directives. What I want to do is match the height of one div to another using AngularJS, and for the change to occur on page load, with an animation. I'm trying to achieve this inside a very simple directive. Here is watered-down version of what I'm trying:

HTML:

<div ng-app="myApp">
    <div class="timeline"></div>
    <div id="match"></div>
</div>

CSS:

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

JS:

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
            });
        }
    };
});

here's the fiddle: http://jsfiddle.net/5jgczuuo/2/

What I don't understand is why the height is not changing upon page load. Any code I put directly above it, such as console logs, etc. are being run, and as far as I can tell, my syntax appears to be correct. (I know that the height var is updated to the correct integer, it's just the css is not changing. this is true even if I change css height to any random int)

I'm sure there's a very simple answer for what I'm doing wrong, any help to point me in the right direction would be much appreciated!