Using same directive with different value in the same view - angularjs

Question

I have two tabs, each tab contains a set of thumbnails which I have set as a directive. Tab is also coming via a directive, and thumbnails too. The data to be pushed into the thumbnail is stored in an constant file. But each tabs thumbnails data is different. How do I implement that?
For setting tabs and thumbnail:
<tabset> <tab heading="{{heading.title}}" id="heading1" set-thumb="setThumbnail(arg)">
<thumbnail></thumbnail>
</tab> <tab heading="{{heading1.title}}" id="heading2" set-thumb="setThumbnail(arg)">
<thumbnail></thumbnail>
</tab> </tabset>
Thumbnail HTML:
<div class="row" style="padding: 20px;">
<div class="col-md-3" ng-repeat="data in thumbnailDetails">
<div class="thumbnail-sim">
<img src="resources/images/Sim-thumbnail.png" alt="sim"
class="thumbnail-img">
<div class="thumbnail-caption">
<div class="thumbnail-name">{{ data.name }}</div>
<div class="thumbnail-date">{{ data.time }}</div>
<div class="thumbnail-details">
{{ data.details }}
</div>
</div>
</div>
<br>
</div>
Thumbnail directive:
angular.module('thumbnailDirectiveModule', [])
.directive('thumbnail', function() {
return {
restrict: 'E',
templateUrl: 'UI/templates/thumbnail.html'
};
});
service part method:
s.getThumbnail = function(thisId){
if(thisId === 'heading1'){
return thumbnailDetails1;
}else if (thisId === 'heading2'){
return thumbnailDetails2;
}
};
Tab directive:
angular.module('tabsDirectiveModule', [])
.directive('tab', function() {
return {
restrict: 'E',
transclude: true,
template: '<div role="tabpanel" ng-show="active" ng-transclude></div>',
require: '^tabset',
scope: {
heading: '#',
id: '#',
setThumb: '&'
},
link: function(scope, elem, attr, tabsetCtrl) {
scope.active = false;
tabsetCtrl.addTab(scope, attr.id);
}
};
})
.directive('tabset', function() {
return {
restrict: 'E',
transclude: true,
scope: { },
templateUrl: 'UI/templates/tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
var self = this;
self.tabs = [];
self.addTab = function addTab(tab, id) {
tab.setThumb({arg: id});
self.tabs.push(tab);
if(self.tabs.length === 1) {
tab.active = true;
}
};
self.select = function(selectedTab) {
angular.forEach(self.tabs, function(tab) {
if(tab.active && tab !== selectedTab) {
tab.active = false;
}
});
selectedTab.active = true;
};
}
};
});