title: How to resolve a promise for a vector map datasource in Angularjs
body: <p>Right so I'm fairly new to angular and really enjoying the experience and I'm slowly but successfully running through a few gotchas that keep cropping up, however this one has be stumped.</p>
  
  <p>I'm loading a version of the Jquery Vector map and everything is working a treat. I'm creating the empty object and populating it from my datasource in a format that the map can use to colour code but here is where the problem crops up.</p>
  
  <p>When the map is instantiated, it gets the contents of the object 'ratingobj' however the resource hasn't populated the object by the time its rendered. I can see this in the console log as ratingobj is always empty.</p>
  
  <p>I understand the concept that the resource is a promise and when the data is retrieved it will be populated however what I can't work out is how to get the resource to resolve the resource and get the data prior to the map being loaded!</p>
  
  <p>Please help, any pointers would be great!</p>
  
  <p>Thanks</p>
  
  <p>Here is my resource query in my services:</p>
  
  <pre><code> .factory('CountryData', ['$resource',
    function($resource){
      return $resource('http://mydatasource/datafeed', {}, {
        query: {
          method:'GET',
          isArray:false,
  
          }
  
      })
  
    }])
  </code></pre>
  
  <p>Here's the controller</p>
  
  <pre><code>.controller('jqvmapCtrl', ['$scope' ,'CountryData', 'greeting',
  function($scope, CountryData, greeting) {
  
    var ratingobj = {};
  
    $scope.rating = CountryData.query(function (response){
        angular.forEach(response.record, function(value,key) {
          ratingobj[value.countryISO] = value.countryRating;
          });
      });
  
      console.log(ratingobj);
  
    $scope.worldMap = {
      map: 'world_en',
      backgroundColor: null,
      color: '#ffffff',
      hoverOpacity: 0,
      hoverColor: '#C2C2C2',        
      selectedColor: '#666666',
      enableZoom: true,
      showTooltip: true,
      values: ratingobj,
      scaleColors: ['#C4FFFF', '#07C0BB'],
      normalizeFunction: 'polynomial',
    };
  
  }
  ]);
  </code></pre>
  
  <p>This is my main app file with the route</p>
  
  <pre><code>  .when('/countries/map', {
      templateUrl: 'views/countries/map.html',
  controller: 'jqvmapCtrl',
  
    })
  </code></pre>