How Do I Use An AmMap In AngularJS?

I am using the amCharts library in my Web application in order to render all the charts. They are working fine, but I need to add a mapChart on the page. I am not as familiar with

Solution 1:

Controller:

.directive('myElem',
 function () {
   return {
       restrict: 'E',
       replace:true,

       template: '<div id="chartdiv" style="min-width: 310px; height: 400px; margin: 0 auto"></div>',
       link: function (scope, element, attrs) {

            var chart = false;

            var initChart = function() {
              if (chart) chart.destroy();
              var config = scope.config || {};
              var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
               chart = AmCharts.makeChart("chartdiv", {
                   type: "map",
                   projection: "winkel3",
                   theme: "light",
                   imagesSettings: {
                     rollOverColor: "#089282",
                     rollOverScale: 3,
                     selectedScale: 3,
                     selectedColor: "#089282",
                     color: "#13564e"
                   },

                   areasSettings: {
                     unlistedAreasColor: "#15A892",
                     outlineThickness: 0.1
                   },

                   dataProvider: {
                     map: "worldLow",
                     images: [ {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Vienna",
                       latitude: 48.2092,
                       longitude: 16.3728
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Minsk",
                       latitude: 53.9678,
                       longitude: 27.5766
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Brussels",
                       latitude: 50.8371,
                       longitude: 4.3676
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Sarajevo",
                       latitude: 43.8608,
                       longitude: 18.4214
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Sofia",
                       latitude: 42.7105,
                       longitude: 23.3238
                     }, {
                       svgPath: targetSVG,
                       zoomLevel: 5,
                       scale: 0.5,
                       title: "Zagreb",
                       latitude: 45.8150,
                       longitude: 15.9785
                     }
                     ]
                   },
                   export: {
                     enabled: true
                   },

                  pathToImages: 'bower_components/amcharts/dist/amcharts/images/'
        });


            };
            initChart();

       }         
   }
   });

HTML:

<my-elem></my-elem>