Несколько раз один и тот же компонент на одной странице с идентификатором в приложении angularjs

Question

У меня есть приложение angularjs. В этом у меня есть компонент для отображения графика. Поэтому в родительском компоненте я получаю данные и передаю их дочернему компоненту. Но на этой странице я могу много раз иметь одни и те же компоненты, но с разными данными. Но я всегда передаю данные в одну и ту же переменную. Таким образом, все данные помещаются в последний созданный компонент.

Я попытался скопировать данные в другую переменную при инициализации компонента, но это не работает.

Это мой шаблон для родителя:

...
<div id="main{{tab.comparisonId}}" class="graphsContainerComparison">
                            <!-- placeholder for graphs -->
                            <ul class="graphsList">
                                <li ng-if="tab.selectedGraphs.length !== 0 && tab.selectedGraphs.indexOf('barGraphDurationEnergy') !== -1" class="component">
                                    <bar-graph-duration-energy
                                        bar-graph-duration-energy-data="listJobsViewCtrl.barGraphDurationEnergyData"
                                        selected-tab="listJobsViewCtrl.selectedTab"
                                        remove-graph="listJobsViewCtrl.removeGraph">
                                    </bar-graph-duration-energy>
                                </li>
                            </ul>
                        </div>
...

Так что я могу иметь много barGraphDurationEnergy компонентов.

Это мой компонент:

.component('barGraphDurationEnergy', {
    templateUrl: 'widgets/listJobs/themes/base/views/components/barGraphDurationEnergy.html',
    bindings: {
        barGraphDurationEnergyData: '<',
        selectedTab: '<',
        removeGraph: '='
    },
    controller: require('./components/barGraphDurationEnergy/barGraphDurationEnergy-component.js'),
    controllerAs: 'barGraphDurationEnergyCtrl'
})

И это инициализация моего компонента:

this.$onInit = function () {
    widgetCtrl.selectedTab.loadingBarGraphDurationEnergy = true;
    widgetCtrl.selectedTab2 = angular.copy(widgetCtrl.selectedTab);
    widgetCtrl.comparisonId = angular.copy(widgetCtrl.selectedTab.comparisonId);
    var main = $('#main' + widgetCtrl.comparisonId);
    var width = main.width();
    var height = main.height();
    $timeout(function () {
        var loaderContainerDiv = $('#loaderContainerDiv_' + widgetCtrl.comparisonId);
        loaderContainerDiv.width(width - 5);
        loaderContainerDiv.height(height);
    });
};

Поэтому я подумал, что с angular.copy(...) я мог бы сохранить comparisonId, потому что у меня была копия, поэтому, если из родительского изменяется, этот не меняется, но каждый раз, когда создается новый comparisonId каждого компонента равен последнему.

И мне это нужно, потому что каждый раз, когда данные для отображения изменяются (от родителей), мне нужно знать, на каких компонентах мы находимся, и отображать данные следующим образом:

 $('#containerBarGraphDurationEnergy_' + widgetCtrl.comparisonId).highcharts(widgetCtrl.barGraphDurationEnergy);

Так что мне нужно comparisonId, чтобы найти компонент на странице.

Так у вас есть идея, как я могу сохранить comparisonId для каждого компонента, так на самом деле, как я могу иметь несколько раз один и тот же компонент на одной странице, и для каждого компонента есть идентификатор?