title: How to store http result in angular
body: <p>couldn't find answers from other questions.</p>
  
  <p>I'm trying to get data from a web service, and then draw a chart and display a table below it. </p>
  
  <p>If I put the datatable inside the .then function it throws in an error. So what I'm thinking is to store the result in a json variable and load it using <code>fromSource</code>. </p>
  
  <p>The problem right now is I can see the <code>def.promise</code>, but when I try to access the .value, it shows 'undefined'.</p>
  
  <p>any idea?</p>
  
  <pre><code>app.controller('abc', function($scope, $q, $http){
   var def = $q.defer();
  
  $http.get(API).then(function(result){
    def.resolve(result);
    //draw a chart
  });
  console.log(def.promise.$$state.value); //returns undefined. 
  console.log(def.promise); 
  //returns:
  //d {$$state: Object, then: function, catch: function, finally: function}$$state: Objectstatus: 1value: Array[39]0: //Object1: Object2:
  
   $scope.dtOptions = DTOptionsBuilder.fromSource(angular.toJson(def.promise.$$state.value));
  });
  </code></pre>