Chartjs-Chartjs render only the last in loop (ionic)

What’s happening is this – charts from each of your blog posts (all of the ones in the picture happen to be pie) are bound to one of 3 objects depending on the chart type (for the picture, its $scope.pieData for all the charts)

The rest is a result of how angular works – it doesn’t matter what the value of $scope.pieData was – when you update $scope.pieData, angular updates all references to $scope.pieData (and consequently the charts get updated as well).

In your case, you keep updating it in the loop and so at the end of the loop $scope.pieData is whatever was in the last post, consequently all your charts have that data. You need to have one scope variable for each chart

Here is a code pen illustrating what is happening in your case – http://codepen.io/anon/pen/doOqjN (I just removed chartjs to make it clearer) – notice that all the values are 3000.

And here is the codepen with the fix – http://codepen.io/anon/pen/MwbqBM. Notice that the values are now all different. The only lines I changed are

<div ng-if="blog.chart.chart_type_id == 1">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 2">{{blog.chart.data}}</div>
<div ng-if="blog.chart.chart_type_id == 3">{{blog.chart.data}}</div>

And you actually don’t need the entirety of your script block!

You could probably optimize a bit more and I didn’t actually do anything about numberData.details because I wasn’t sure what it was supposed to be for.