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

i trying use ng-repeat on array of below object repeat custom directive.

my array looks 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 code through trying create multiple chart directive.

<div ng-repeat="(key,value) in competitors">   <mi-chart value="competitors[key]" chart-obj="competitors[key]"></mi-chart> </div> 

when debug code, directive not getting exact value , giving competitors[key] value , chart-obj. not replacing values on ng-repeat.

can tell what's wrong doing , solution problem.

i modified html this:

<div ng-repeat="competitor in competitors track competitor.key">    <mi-chart value="competitor" chart-obj="competitor"></mi-chart> </div> 

which results in correct binding of elements can see in code snippet below.
track by component optional because have unique key value available wise use it. improves performance in case entries updated.

however not sure if 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 competitor.key">      <mi-chart value="competitor" chart-obj="competitor"></mi-chart>    </div>  </div>