title: Angular : load lots of data via directive causing browser issue
body: <p>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 : </p>
  
  <pre><code>        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);
                     });
                 }
              };
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code>$scope.$on('initialised', function() {
  
           $scope.$apply(function(){
              $scope.mapLoaded = true;
           });
      })
  </code></pre>
  
  <p>Do you know a way to solve my (1) and (2) issue ? Or should I look for another js library to do this?</p>
  
  <p>Thank you</p>
  
  <p>PS : here is my map directive (images is an array with 20k entry at the moment) : </p>
  
  <pre><code> directive('amChartsLanguage', function() {
            return {
              restrict: 'E',
              replace:true,
              template: '&lt;div id="mapLanguage" style="height: 1000px; margin: 0 auto"&gt; &lt;/div&gt;',
              link: function(scope, element, attrs) {
  
  
                  var chart = false;
  
                  var initChart = function() {
                      if (chart) chart.destroy();
                      var images = [];
                      var legendData = [];
                      for(var i=0 ; i &lt; 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();
  
              }
          }
          })
  </code></pre>