Angular Js - Jvector Map Accessing "onregionclick"

I'm creating a dashboard and I wanted to add this USA map and when I click on any of the region I want it's population to be printed out on the web page from the cities.json file.

Solution 1:

It's just an idea, maybe it's working.

App.directive('mapUsa', [function() {

return {

    restrict: 'A',
    link: function(scope, element, attrs) {
      element.vectorMap({
      ...
         onRegionClick: function(event, code) {
              scope.onRegionClick(event, code);
         }
      }
    },
    controller: ['citiesData', function(citiesData){
         onRegionClick: function(event, code) {
              console.log(citiesData);
         }
    }]

Solution 2:

You may do something like this

var mdata;
    app.controller('MapCtrl',['$scope','$location','$http', function($scope, $location,$http) {

            $http.get('ajax/data.json').success(function(data, status, headers, config){
                mdata = data;
              //   $scope.mapdata = data;
            }).error(function(data, status, headers, config) {

                alert("Error retrieving data");
            })

    }]);

    app.directive("mapUsa", [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch("mdata", function (n, o) {
                $(element).vectorMap({
                    map: 'world_mill_en',
                    backgroundColor: "transparent",
                    regionStyle: {
                        initial: {
                            fill: '#e4e4e4',
                            "fill-opacity": 1,
                            stroke: 'none',
                            "stroke-width": 0,
                            "stroke-opacity": 1
                        }
                    },
                    series: {
                        regions: [{
                            values: mdata,
                            scale: ["#92c1dc", "#ebf4f9"],
                            normalizeFunction: 'polynomial'
                        }]
                    },
                    onRegionLabelShow: function (e, el, code) {

                        if (typeof mdata[code] != "undefined")
                            el.html(el.html() + ': ' + mdata[code] + ' new visitors');
                    },
                    onRegionClick: function (event, code) {

                    },
                    markerStyle: {
                        initial: {
                            fill: '#F0A518',
                            stroke: '#F0A518'
                        }
                    }
                });
            });

        }

    }

}]);