title: Angular: Access resource value in controller
body: <p>I'm terrible at javascript and very new to Angular so do bear with me.</p>
  
  <p>My server is returning this:</p>
  
  <pre><code>{"latitude": 3.172398, "name": "Event", "longitude": 101.6739005}
  </code></pre>
  
  <p><strong>services.js</strong></p>
  
  <pre><code>var mapModule = angular.module('map.services', ['ngResource']);
  
  mapModule.factory('Event', function($resource) {
      return $resource('/custom_api/get_event_details/:eventId/',
          {eventId: '@id'});
  });
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>function mapCtrl($scope, Event) {
      var eventDetail = Event.get({eventId: $scope.eventId});
      console.log(eventDetail);
      console.log(eventDetail.latitude);
  }
  </code></pre>
  
  <p>I'm trying to access the json returned by my server via <code>eventDetail.latitude</code> but I am getting <code>undefined</code>. </p>
  
  <p>In console, <code>console.log(eventDetail)</code> looks like:</p>
  
  <pre><code>e {$get: function, $save: function, $query: function, $remove: function, $delete: function}
  latitude: 3.172398
  longitude: 101.6739005
  name: "abc"
  __proto__: e
  </code></pre>
  
  <p>I get that <code>eventDetail</code> is a <code>resource</code> instance but how do I just get to the values directly?</p>
  
  <p>If I had set <code>$scope.eventDetail</code> in my controller, I would be able to access it via <code>{{ eventDetail.latitude }}</code> in my template. </p>
  
  <p>How on earth do I do this in the controller?</p>