Angular : load lots of data via directive causing browser issue - angularjs

Question

I have an angular directive loading a svg map (using amchart) where I add thousands of svg circles. In the end everything works but my browser seems in pain and I would need to (1) optimize my loading and (2) display a loading symbol that could last till the map can actually display for real.
Today I use this kind of directive attribute to know when my directive is loaded :
directive('initialisation',['$rootScope',function($rootScope) {
return {
restrict: 'A',
link: function($scope) {
var to;
var listener = $scope.$watch(function() {
clearTimeout(to);
to = setTimeout(function () {
listener();
$rootScope.$broadcast('initialised');
}, 50);
});
}
};
Well this is not good to me as my loading symbol (angular-material) freezes, and then disappear to leaves an empty browser for a few seconds, before the map can render. For information I use ng-hide on the loading div and ng-show on the map div, and this is the way I apply it :
$scope.$on('initialised', function() {
$scope.$apply(function(){
$scope.mapLoaded = true;
});
})
Do you know a way to solve my (1) and (2) issue ? Or should I look for another js library to do this?
Thank you
PS : here is my map directive (images is an array with 20k entry at the moment) :
directive('amChartsLanguage', function() {
return {
restrict: 'E',
replace:true,
template: '<div id="mapLanguage" style="height: 1000px; margin: 0 auto"> </div>',
link: function(scope, element, attrs) {
var chart = false;
var initChart = function() {
if (chart) chart.destroy();
var images = [];
var legendData = [];
for(var i=0 ; i < scope.languageZeppelin.length ; i ++ ) {
images.push( {
"type": "circle",
"width": 7,
"height": 7,
"color": scope.languageZeppelin[i].color,
"longitude": scope.languageZeppelin[i].lon,
"latitude": scope.languageZeppelin[i].lat
} );
}
var legend = new AmCharts.AmLegend();
legend.width="10%";
legend.height="300";
legend.equalWidths = false;
legend.backgroundAlpha = 0.5;
legend.backgroundColor = "#FFFFFF";
legend.borderColor = "#ffffff";
legend.borderAlpha = 1;
legend.verticalGap = 10;
legend.top = 150;
legend.left = 70;
legend.position = "left";
legend.maxColumns = 1;
legend.data = scope.legend;
// build map
chart = AmCharts.makeChart( "mapLanguage", {
"type": "map",
"areasSettings": {
"unlistedAreasColor": "#15A892",
"autoZoom": true,
"selectedColor": "#FFCC00",
"color": "#909090"
},
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": images,
"zoomLevel": 1,
"zoomLongitude": 6,
"zoomLatitude": 11
},
"export": {
"enabled": false
}
} );
chart.addLegend(legend);
chart.validateNow(legend);
};
initChart();
}
}
})

Answer 1

we have angular with a lot more data on the page. with poor design og architechture. loading ofcoarse too long but after that performance is great. we use d3