Passing directives as content for VIS elements

Question

I used visjs.org/docs/timeline/ to display the time frame of the data. I have a directive that takes data from an API and creates a template using the $ compile method.

<vis-timeline timeline-data="apiData"></vis-timeline> 

And in linkFn I repeat the data to create an area for the template, which should be passed as content for the DataSet.

 link: function(scope,element,attr){ if(scope.roster.timelineData){ angular.forEach(scope.roster.timelineData, function(){ //Create a scope for the directive used for vis DataSet var templateScope = scope.$new(true);//create an isolated scope templateScope.name = 'templateData'; //this can be different for each iteration var template = $compile('<timeline-item template-data="name"></timeline-item>')(templateScope)[0]; }); } } 

I push the compiled template as content for the DataSet, which is added to the timeline. Although this method works well, it takes about 10 seconds to build a timeline. Any editing on the timeline will take another 10 seconds.

If I add a simple template instead, it will be added quickly. How to increase the speed of compilation of templates?