title: Angular ng-repeat works... but no values are bound / displayed (Twig)
body: <p>I'm having some issues getting my new Angular project off the ground. I'm going to break off pieces into services and such later on, but for now I just have a controller called <code>DashCtrl</code> in a module called <code>sandpiper</code>.</p>
  
  <p>I want to make a list of <code>div.card</code> elements from the <code>$scope.results</code> array within <code>DashCtrl</code>, additional items append to <code>$scope.results</code> when <code>add-button</code> is clicked, and also to append its <code>$scope.test</code> to the header. What happens, after clicking the button a few times, is this: (<a href="http://i.imgur.com/HNmGWMK.png" rel="nofollow">Screenshot link because I'm new and don't have reputation points T_T</a>)</p>
  
  <p><code>$scope.pushit()</code> works and <code>ng-repeat</code> winds up spitting out the proper number of items, but the titles are absent. <code>$scope.test</code> isn't getting read either. I've banged my head against the wall for a couple of hours now and even coded up <a href="http://jsfiddle.net/ez6rL54o/" rel="nofollow">a little bare-bones Angular test</a> to make sure I wasn't out of my gourd... but I just cannot figure this one out.</p>
  
  <hr>
  
  <p>Here's my JS (two scripts, minified into <code>/build/sandpiper.min.js</code> later)</p>
  
  <pre><code>var app = angular.module('sandpiper', []);
  
  app.controller('DashCtrl',['$scope',function($scope){
  
      $scope.test = "Header"
  
      $scope.results = [
          {
              title: "Test Item 1",
              file: "12345978-My-Test-Document.pdf",
              type: "PDF",
              tags: ['pdf','test','foo','bar'],
              image: "static/img/pdf.png"
          }
      ]
  
      $scope.pushit = function(){
          $scope.results.push({
              title: "Test Item 1",
              file: "12345978-My-Test-Document.pdf",
              type: "PDF",
              tags: ['pdf','test','foo','bar'],
              image: "static/img/pdf.png"
          })
      }
  }])
  </code></pre>
  
  <p>And here's my HTML (unrelated portions are omitted)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
  (...)
  
      &lt;!-- bower:js --&gt;
      &lt;script src="../bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/materialize/bin/materialize.js"&gt;&lt;/script&gt;
      &lt;script src="../bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;!-- endbower --&gt;
  
      &lt;script src="/build/sandpiper.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="sandpiper"&gt;
      &lt;main&gt;
          &lt;div class="container" id="content-root"&gt;
              &lt;div id="dash-wrapper" ng-controller="DashCtrl"&gt;
                  &lt;h3&gt;Test {{ test }}&lt;/h3&gt;
                  &lt;a ng-click="pushit()" class="btn-floating btn-large waves-effect waves-light" id="add-button"&gt;
                      &lt;i class="material-icons"&gt;add&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;nav&gt;
                      (...)
                  &lt;/nav&gt;
  
                  &lt;div class="row" id="results-container"&gt;
                      &lt;div class="col s12 m4 l3" ng-repeat="item in results"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-content"&gt;
                                  &lt;span class="black-text"&gt;{{ item.title }}&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  
      (...)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated; thanks in advance. Hope it's not something really stupid...</p>
  
  <p>(Also this is my first post here, so if I'm doing anything wrong let me know)</p>