AngularJS Directive: display multiple times in the same page - angularjs

Question

I have an array with a lot of data.
I need to display it in different areas (about 10 times) in the same page (with different filtering).
To prevent long loading time (of multiple 'ng-repeat'), i'm trying to put it in a directive and show the same directive multiple times (instead of 'ng-repeat').
I want the directive to show every time it's same instance and not create new objects (and in that way to speed up the loading).
How can i get the directive to show the same instance and not create itself over and over again?
My example code:
Plunker
var contec = angular.module('app', [])
.controller('MainCtrl', function($scope,$rootScope) {
$scope.change = function(){
var id = Math.floor((Math.random() * 4) + 0);
var val = Math.floor((Math.random() * 100) + 1);
$rootScope.data.items[id].id = val;
}
$rootScope.data = {
items: [{
id: 1,
name: "first"
}, {
id: 2,
name: "second"
}, {
id: 3,
name: "third"
}, {
id: 4,
name: "forth"
}]
}
});
contec.directive('firstDirective', function($rootScope,$compile) {
return {
replace: true,
restrict: 'EA',
scope: {
data: '='
},
link: function(scope, element, attrs) {
var template = '';
angular.forEach($rootScope.data.items, function(item, key) {
var tmp = '<div second-directive data="' + key + '"></div>';
template = template + tmp;
});
element.html(template);
$compile(element.contents())(scope);
}
}
});
contec.directive('secondDirective', function($rootScope,$compile) {
var comp = function(scope,element, attrs,firstDirective){
var index = scope.data;
scope.item = $rootScope.data.items[index];
var template = '<ng-include src="\'itemTemplate.html\'"></ng-include>';
element.html(template);
$compile(element.contents())(scope);
}
return {
restrict: 'EA',
link: comp,
scope: {
data: '='
},
};
});

Answer 1

I think the best way to make your data instance available is to wrap it in a Service (specifically, a factory)
Ex:
contec.factory('DataFactory', function() {
var data = {
items: [{
id: 1,
name: "first"
}, {
id: 2,
name: "second"
}, {
id: 3,
name: "third"
}, {
id: 4,
name: "forth"
}]
}
return {
getData(): function() {
return data;
}
}
}
Then you'll be able to inject the factory in any controller that requires it.
contec.controller('ExampleController', ['DataFactory', ExampleController]);
function ExampleController(DataFactory) {
this.data = DataFactory.getData();
}
This approach has the added benefit of being more testable, since you can easily inject mock data in your unit tests.