Google chart in angularjs ng-repeat - angularjs

Question

I am new to AngularJs and Google charts. My requirement is to show Google charts dynamically in ng-repeat for each li.
<li ng-repeat="ques in surveyquestions">
<label for="{{ques['questions']}}">
{{ques['id']}} {{ques['questions']}}
</label>
<div ng-init="calltry(ques['option_array'],ques['id'])"></div>
<div id="chartdiv{{ques['id']}}"></div>
</li>
In above code through ng-init I pass the data to render the Google chart. In JavaScript I used as below but it's not working.
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'+id));
It's working fine when id is static like below.
<div id="chartdiv"></div>
var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
Please help to sort out what is the issue.

Answer 1

Try with angular-google-chart,
Refer :https://angular-google-chart.github.io/angular-google-chart/docs/latest/examples/bar/
<div class="chartContainer" ng-repeat="data in arrayDiv">
<div layout-padding layout-margin google-chart chart="drawChart(data)">
</div>
</div>
$scope.drawChart = function (value) {
$scope.chartData = [];
var chartValue = {
c: [{
v: 'subject
}, {
v: 5,
f: " questions"
}, {
v: 6,
f: " questions"
}]
};
$scope.chartData.push(chartValue);
$scope.qaChart = {};
$scope.qaChart.type = "BarChart";
$scope.qaChart.data = {
"cols": [{
id: "Sections",
label: "Subject",
type: "string"
}, {
id: "Correct",
label: "Correct",
type: "number"
}, {
id: "Wrong",
label: "Wrong",
type: "number"
}],
"rows": $scope.chartData
};
$scope.qaChart.options = {
"isStacked": "true",
"fill": 20,
"displayExactValues": true,
"colors": ['#4CAF50', '#EF5350', '#00adee'],
"vAxis": {
"title": " Questions",
},
"hAxis": {
"title": "Details",
}
};
return $scope.qaChart;
};