AngularJS - multiple use of component with same controller, using different data

I have a simple component that is being included using ng-include. The controller of the component is assigned in the included HTML. I would like to use the same component twice (or more) but load different data.

What I've tried to do is parse the JSON and create new objects (which works fine) but i can't assign the data to the appropriate component using it's id attribute.

Any help will be nice. A directive? jQuery?

I know this is a some-what weird way of doing it, so I'll add that at the moment the project's business logic needs this r similar behaviour.

JSON:

[
    {
        "componentId" : 'component1",
        "data" : "Hello"
    },
    {
        "componentId" : 'component1",
        "data" : "World"
    }
]

Component Template (someTemplate.tpl.html)

<div data-ng-controller="DefaultController">
    <h2>{{message}}</h2>
</div>

Main HTML

<div data-ng-controller="MainController">
    <div data-ng-include="'someTemplate.tpl.html'" id="component1"></div>
    <div data-ng-include="'someTemplate.tpl.html'" id="component2"></div>
</div>

Controller

function DefaultController($scope){
    var componentId = ???
    $scope.message = $scope[componentId].data;
}

Main controller

function MainController($scope, $http){
    $http.get('data.json').then(function(response){
        $scope.data = response;

        for(var i in $scope.data){
            $scope[$scope.data[i].componentId] = $scope.data[i].data;
        }
    }
}