Chart directive doesn't work when rendering in a carousel

[mraible]

If you try to use this directive for Highcharts in a carousel, it results in the following error:

TypeError: Cannot read property 'length' of undefined at Object.ob.setMaxTicks

This seems to be caused by the following css in Bootstrap:

.carousel-inner > .item { display: none }

If I add an override with "display: block" to my stylesheet, everything works, but the charts are stacked instead of in a carousel. The good news is all the charts are rendered successfully.

A seemingly better solution is to modify the directive to show/hide the "item" element so Highcharts is able to write to it.

if (element.parent().not(':visible')) {
    element.parent().show();
}

var chart = new Highcharts.Chart(newSettings);

if (scope.$last) {
    $.each(element.parent().siblings(), function() {
        $(this).attr('style', '');
    });
    element.parent().attr('style', '');
}

More info at https://groups.google.com/group/angular/browse_thread/thread/5a5cc0f0ed98104f/652d8b52dbbe0709