jVectorMap change/refresh map with new reference map?

Question

I have a div that contains a map, however, I would like to change a property that would in turn update the map to correspond to the change made to the property. More concretely, when I change a map name, I would like the div to change to reflect this new map name. If I have Chile mapped and I change the map name to Brazil, I would like Brazil's map to be plotted. Please see below for some more context. I have tried .reset(), .updateSize(), and a few other tweaks suggested... Nothing has worked.

app.directive('countrymap', ['$rootScope', function($rootScope) 
{
    return {
        link: function(scope, element, attrs) {
            $(element).width('auto'),
            $(element).height(500),
            $rootScope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    var map = new jvm.Map(
                    {
                        container: $(element),
                        map: newCountry,
                        backgroundColor: 'transparent',
                        regionsSelectable: true,
                        regionsSelectableOne: true,
                        zoomButtons : false,
                        regionStyle: 
                        {
                            selected:
                            { fill: 'Red' }
                        }
                    });
                }, 100);
            })
        }
    };  
}]);

Answer 1

I thought I'd post the solution I found to this issue for those of you experiencing the same frustration. I decided to use .remove() to get rid of the old map and just plot a new one. See below for the modified code.

app.directive('countrymap', ['$rootScope', function($rootScope) 
{
    return {
        link: function(scope, element, attrs) {
            $(element).width('auto'),
            $(element).height(500),
            $rootScope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    try { $(element).vectorMap('get', 'mapObject').remove(); }
                    catch(err) {}
                    var map = new jvm.Map(
                    {
                        container: $(element),
                        map: newCountry,
                        backgroundColor: 'transparent',
                        regionsSelectable: true,
                        regionsSelectableOne: true,
                        zoomButtons : false,
                        regionStyle: 
                        {
                            selected:
                            { fill: 'Red' }
                        }
                    });
                }, 100);
            })
        }
    };  
}]);