Multiple times the same component in one page with identifier in angularjs application

I have an angularjs application. In this one I have a component to display a graph. So in the parent of the components, I receive the data and I pass them to the child component. But in this page I can have many times the same components but with different data. But I always pass the data in the same variable. So all the data go in the last component created.

I tried to copy the data in another variable on the initialization of the component but it doesn’t work.

This is my template for the parent:

...
<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>
...

So I can have a lot of barGraphDurationEnergy components.

This is my component:

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

And this is the initialization of my component:

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);
    });
};

So I was thinking that with the angular.copy(...) I could keep the comparisonId because I had a copy, so if the one from the parent changes, this one doesn’t change, but each times a new one is created, the comparisonId of each components is equal to the last one.

And I need it because, every times the data to display changes (from the parents), I need to know on which components we are and display the data like this:

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

So I need the comparisonId to find the component in the page.

So do you have an idea how I can keep the comparisonId for each component, so in fact how I can have multiple times the same component in the same page and for each components have an identifier ?

Source: AngularJS