ng-repeat of array of object on custom directive not working - angularjs

Question

I am trying to use ng-repeat on array of below object to repeat my custom directive.
My array looks something like below.
var Competitors = [];
Competitors.push({
key: 1,
value: {}//Blank object
});
Competitors.push({
key: 2,
value: {}//Blank object
});
Competitors.push({
key: 3,
value: {}//Blank object
});
My custom directive.
module.directive('miChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
chartData: "=value",
chartObj: "=?"
},
replace: true,
link: function ($scope, $element, $attrs) {
$scope.$watch('chartData', function (value) {
if (!value) {
return;
}
$scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
$scope.chartObj = new Highcharts.Chart($scope.chartData);
});
}
}
});
Here is the code through which i am trying to create multiple chart with my directive.
<div ng-repeat="(key,value) in Competitors">
<mi-chart value="Competitors[key]" chart-obj="Competitors[key]"></mi-chart>
</div>
When i debug my code, the directive is not getting exact value and giving Competitors[key] as a value and chart-obj. So it is not replacing the values on ng-repeat.
Can anybody tell what's wrong i am doing and what is the solution to this problem.

Answer 1

I modified your html like this:
<div ng-repeat="competitor in Competitors track by competitor.key">
<mi-chart value="competitor" chart-obj="competitor"></mi-chart>
</div>
which results in correct binding of the elements as you can see in the code snippet below.
The track by component is optional but because you already have a unique key value available it would be wise to use it. It improves performance in case some entries get updated.
However I am not sure if that is what you are looking for.
var module = angular.module('app',[]);
module.controller('ctrl', function($scope){
$scope.Competitors = [];
$scope.Competitors.push({
key: 1,
value: {}//Blank object
});
$scope.Competitors.push({
key: 2,
value: {}//Blank object
});
$scope.Competitors.push({
key: 3,
value: {}//Blank object
});
});
module.directive('miChart', function () {
return {
restrict: 'E',
template: '<div>-----------<br/>chartData - key: {{chartData.key}} value: {{chartData.value}}<br/>chartObj - key: {{chartObj.key}} value: {{chartObj.value}}</div>',
scope: {
chartData: "=value",
chartObj: "=?"
},
replace: true,
link: function ($scope, $element, $attrs) {
$scope.$watch('chartData', function (value) {
if (!value) {
return;
}
//$scope.chartData.chart.renderTo = $scope.chartData.chart.renderTo || $element[0];
//$scope.chartObj = new Highcharts.Chart($scope.chartData);
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Entries:
<div ng-repeat="competitor in Competitors track by competitor.key">
<mi-chart value="competitor" chart-obj="competitor"></mi-chart>
</div>
</div>