Chartjs-How to show bar chart for every product

 var app = angular.module('App.review', []);

    app.directive('review', function () {
        return {
            restrict: 'E',
            scope: {
                data: "=data"
            },
            link: function ($scope, element, attrs) {
                var ctx = element[0].querySelector('#myChart');
                var myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: {
                        labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
                        datasets: [{
                            label: '# of Votes',
                            data: $scope.data,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255,99,132,1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            xAxes: [{
                                display: false,
                                stacked: false,
                                ticks: {
                                    min: 0,
                                    max: 10
                                }
                            }]
                        }
                    }
                });
            },
            templateUrl: 'review.html',
            transclude: false
        }
    });
    app.controller('ReviewsCtrl', function ($scope) {
        $scope.dataList = [{
            productId: 1,
            productName: 'One',
            data: [1, 2, 3, 4, 5]
        }, {
            productId: 2,
            productName: 'Two',
            data: [6, 7, 8, 1, 1]
        }];
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<div ng-app="App.review">
	<table>
		<tr>
			<td ng-controller="ReviewsCtrl">
				<div data-ng-repeat="r in dataList">
					{{r.productName}}
					<review data="r.data"></review>
				</div>
			</td>
		</tr>
	</table>

	<script type="text/ng-template" id="review.html">
		<div style="width: 100%; border: solid green;">
			<canvas id="myChart" width="100" height="100vh"></canvas>
		</div>
	</script>
</div>