title: GET with Angular and Parse.com
body: <p>I just started using <a href="http://parse.com" rel="nofollow">http://parse.com</a> and I'm wanting to get some data that is previously stored. Everything I've tried seems that it should be working, but I have a feeling that parse doesn't work real well with AngularJS for some reason. </p>
  
  <p>Here's my JS and HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>app.controller('FoodLog', function($scope) {
        Parse.initialize("XXXXXX", "XXXXXX");
  
        $scope.foodItems = [];
  
        var Food = Parse.Object.extend("Food");
        var parseFoodItems = new Parse.Query(Food);
        parseFoodItems.find({
          success: function(results) {
  
            for (var i = 0; i &lt; results.length; i++) {
  
              var food_name = results[i].get('name');
              var food_protein = results[i].get('protein');
              var food_carbs = results[i].get('carbs');
              var food_fat = results[i].get('fat');
  
              $scope.foodItems.push({
                name: food_name,
                protein: food_protein,
                carbs: food_carbs,
                fat: food_fat,
                calories: (food_protein * 4) + (food_carbs * 4) + (food_fat * 9)
              });
            }
          },
          error: function(error) {
            alert("something broke" + " " + error.code + " " + error.message);
          }
        });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menu-items"&gt;
    &lt;div ng-repeat="item in foodItems"&gt;
      &lt;button class="btn btn-info" type="button" data-toggle="collapse" data-target="#food-{{$index}}"&gt;
        {{item.name}}
      &lt;/button&gt;
      &lt;div id="food-{{$index}}" class="collapse"&gt;
        &lt;ul&gt;
          &lt;li&gt;Protein: {{item.protein}}g&lt;/li&gt;
          &lt;li&gt;Carbs: {{item.carbs}}g&lt;/li&gt;
          &lt;li&gt;Fat: {{item.fat}}g&lt;/li&gt;
          &lt;li&gt;Total Calories: {{item.calories}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using the correct keys for Parse, and I've also tried outputting to the console after I've pushed to my foodItems array, and the items are being pushed, they're just not being picked up by Angular. If I hard code items into the array, they display just fine in my HTML.</p>
  
  <p>Any help is greatly appreciated! Thank you!</p>