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) {

            varchart=false;varinitChart=function() {
              if(chart)chart.destroy();varconfig=scope.config|| {};vartargetSVG="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>