title: how do I access child elements of JSON in the controller in Angular JS
body: <p>I don't understand how to wait for the resource call to finish before assigning the data.properties to $scope in my controller.</p>
  
  <p>here is my confusion:</p>
  
  <p>i have a resource call that returns this:</p>
  
  <pre><code>[
  {
      "PreAlertInventory": "5.000000",
      "SharesInInventory": "3.000000",
      "TotalSharesSold": "2.000000",
      "TotalMoneySharesSold": "18.000000",
      "TotalSharesBought": "0.000000",
      "TotalShareCost": "0.000000",
      "EstimatedLosses": "0.000000"
  }
  ]
  </code></pre>
  
  <p>here is the applicable code from the controller:</p>
  
  <pre><code>$scope.alertSwap = function () {
  
    var data = Data.query(); // gets the data. works as expected
  
    //$scope.test = data; //works as expected. can access data and properties in template
    $scope.test = data.TotalMoneySharesSold; //does not work. is empty???
  }
  </code></pre>
  
  <p>i can access the array and its properties from the template BUT not from inside the controller. </p>
  
  <p>How do I access the child elements from inside the controller that called the resource?</p>
  
  <p><a href="http://plnkr.co/edit/JnLqq4v7lKlYOHg85Jma?p=preview" rel="nofollow">http://plnkr.co/edit/JnLqq4v7lKlYOHg85Jma?p=preview</a></p>
  
  <h1>answer: thanks to all who helped:</h1>
  
  <p>I needed to assign a callback to the resource call, and assign the elements from within the function:</p>
  
  <pre><code>$scope.data = Data.query(myParams, function(data) {
    $scope.test = data[0].TotalSharesBought;
  });
  </code></pre>