title: jVectorMap change/refresh map with new reference map?
body: <p>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 <code>.reset()</code>, <code>.updateSize()</code>, and a few other tweaks suggested... Nothing has worked. </p>
  
  <pre><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() 
                  { 
                      var map = new jvm.Map(
                      {
                          container: $(element),
                          map: newCountry,
                          backgroundColor: 'transparent',
                          regionsSelectable: true,
                          regionsSelectableOne: true,
                          zoomButtons : false,
                          regionStyle: 
                          {
                              selected:
                              { fill: 'Red' }
                          }
                      });
                  }, 100);
              })
          }
      };  
  }]);
  </code></pre>