unable to show c3 simple chart directives with in angularjs gridster

Question

I am trying to show angularjs c3 charts in angular gridster. I am using c3 chart directives from https://github.com/wasilak/angular-c3-simple. Even though the gridster is appearing the charts with in the gridster are missing. Please find the gridster+C3-simple

The following my gridster code with c3-simple chart directives inside it :

   <div gridster="gridsterOptions" ng-if="dashboard.widgets">
  <ul class="with-3d-shadow with-transitions">
    <li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
      <div class="box">
          <div class="box-header">
              <h3>{{ widget.name }}</h3>
          </div>
          <div class="box-content" ng-if="widget.options">
           <c3-simple id= "widget.id" config="widget.options"></c3-simple>
          </div>
      </div>
    </li>
  </ul>
</div> 

Answer 1

Changing the directive to makes the charts to be appear in the gridster instead