Donut doesn't render when value is scope variable

[ljerka]

I'm trying to make a donut from values I get from json file, for example:

<c3chart bindto-id="donut-plot1-chart">
    <chart-column column-id="Data 1" column-values="{{ data[1].myNbr }}" column-type="donut"/>
        <chart-column column-id="Data 2" column-values="30" column-type="donut"/>
    <chart-donut title="{{ data[1].myNbr }}%" width="5" show-label="false" />
</c3chart>

But it draws only a gray circle. I can't get it to draw the value fromdata[1].myNbr. although that definitely is a number. Also, it doesn't writeout the title. Any ideas? Thanks!

Btw, I saw #130 and your reply, and found the possibility of binding data

<c3chart bindto-id="eventchart" chart-data="vm.donutPoints" chart-columns="vm.donutColumns" sort-data="null">
    <chart-donut expand="true" width="30" show-label="false" title="Donut Title"/>
</c3chart>

but I have to manipulate the data and hoped to do it inside html file.

[Eden-Sun]

{{ (data[1].myNbr }}
What is the ( for ?

[ljerka]

A typo :) I deleted some parts of the code and the bracket remained by mistake. I edited it now, thanks.

[Eden-Sun]

your $scope.data is async data ? chart must be render after data is fetched. some directives are not 2-way binding. check this demo, you can use ng-if to hold the chart render after fetched https://codepen.io/anon/pen/YpEmNj?editors=1010#anon-login

[ljerka]

ng-ifdid the trick. It would be great if examples like that were in examples. Thanks!