Drawing morris chart in angular directive almost shows up

Question

I'm trying to draw a morris chart in an angular directive that is within an ng-repeat block. It is weird, because it draws, almost? I can see it's there and the mouseovers work, but the graph itself is only a thin line at the top. Does anybody have any ideas?

Here's the html:

        <div id="page-wrapper" ng-repeat="d in dealerGroup.Dealerships__r" ng-if="expandedDealer == d.Id">
           <div class="panel-heading">Area Chart Example</div>
           <div class="panel-body">
             <area-chart dealership="d" chartData="d.SalesChartData"></area-chart>
            </div>
        </div>

And here's the directive

angular.module('areaChart', ['ui.bootstrap']).directive('areaChart', function($window) {
var directive = {};
// directive.templateUrl = directivePath + '/charts/area-chart.html';
directive.restrict = 'EA';
directive.scope = {
    dealership: "=",
    chartdata: "="
};

directive.controller = function($scope) {
    $scope.ykeys = function() {
        var ykeys = [];
        angular.forEach($scope.chartdata, function(d,k) {
            angular.forEach(d, function(value,key) {
                if(key != 'period') { ykeys.push(key); }
            })
        });
        return ykeys;
    }
}

directive.link = function($scope,element,attrs) {

    Morris.Area({
        element: element,
        xkey: 'period',
        ykeys: $scope.ykeys(),
        labels: $scope.ykeys(),
        hideHover: 'auto',
        pointSize: 2,
        data: $scope.chartdata
    }); 

}

return directive;

});

And here's what happens:

Additionally, resizing makes the whole thing blow up with javascript errors everywhere. But i'll worry that separately