Kendo UI Chart in AngularJS not resizing on initial load

Question

We have already looked at Kendo UI chart not resizing question. The basic structure of our dashboard is like this:

Panelbar (multiple: true)

• table panel (default active state)
• table panel with tabstrip
  • ~9 tabs
• panel with tabstrip with 4 tabs (
  • scatter chart
  • bar chart
  • bar chart
  • histogram chart
• table panel

My coworker experimented with making the chart panel the default active state, and that worked, but we want the first table panel to be the default active state. When we switch to the third panel (the first time), we will get a chart which only fills about half the width. When we cycle chart tabs and come back, it renders correctly.

I got it working in the old (jQuery) version with a sort of hacky fix: re-render the panelbar as a callback after drawing the charts.

Currently, in AngularJS, my coworker uses the following (resize after chart click in jQuery):

<script>
   $("#chart").on('click', function(e){
        setTimeout(resize, 0);
   })

    $("#chart div").click(function(e) {
        e.stopPropagation();
   });

   function resize (){
      var chart = $("#MOSChart").data("kendoChart");
         chart.resize();
      };
</script>

Here is the code we use for our chart panel:

<div kendo-tab-strip  k-content-urls="[ null, null, null, null]">
    <ul>
        <li class="k-state-active" style="font-weight: bold" > MOS_scatter</li>
        <li style="font-weight: bold">MOS_bar</li>
        <li style="font-weight: bold">Completion_bar</li>
        <li style="font-weight: bold">MOS_histogram</li>
    </ul>
    <div>
        <moschart  config ="config" plot_to_slope = "plotToSlope(m, b, x)" line_reg = "lineReg(x, y)" mos_type = "'PESQ'" ng-if ="config"></moschart>
    </div>
    <div>
        <aggregatedmoschart config ="config" plot_to_slope = "plotToSlope(m, b, x)" line_reg = "lineReg(x, y)" mos_type = "'PESQ'" ng-if ="config"></aggregatedmoschart>
    </div>
    <div>
        <callcompletionchart config ="config" plot_to_slope = "plotToSlope(m, b, x)" line_reg = "lineReg(x, y)" mos_type = "'PESQ'" ng-if ="config"></callcompletionchart>
    </div>
    <div>
        <moshistogram config ="config"  mos_type = "'PESQ'" ng-if ="config"></moshistogram>
    </div>
</div>

We were wondering if there was a way we could solve this problem using just AngularJS instead of a jQuery hack. Thanks for reading!