title: Refresh a ng-repeat list from server every x seconds
body: <p>As the title suggests I want to be able to refresh a ng-repeat list from the server every 30 seconds or so. More data can be added on the backend, so I want my list to reflect that. Right now I have the regular <code>$http.get( )</code> working fine which is here:</p>
  
  <pre><code>$scope.select = function() {
    $scope.searchText = '';
    $scope.selectedItem = null;
    var url = 'http:xxxxxxxxxxxx.com';
    url += $scope.selectModel.name;
    console.debug("GOING TO: " + url);
    $http.get(url).success(function(data2) {
      $scope.records = [];
      data2.forEach(function(r) {
          $scope.records.push(r);
      });
    });
  };
  </code></pre>
  
  <p>and the portion of the web page it supplies is:</p>
  
  <pre><code>&lt;div style="margin: 1em"&gt;
  &lt;h4&gt;Search&lt;/h4&gt;
          &lt;div role="form"&gt;
              &lt;!-- start dropdown --&gt;
              &lt;div class="form-group"&gt;
                  &lt;select class="form-control" ng-options="model as model.name for model in allModels" ng-model="selectModel" ng-change="select()"&gt;
                      &lt;option value=""&gt;Choose Model&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;!-- /end dropdown--&gt;
              &lt;div class="form-group"&gt;
                  &lt;input id="start_date" type="text" class="form-control" placeholder="Threat Date"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div&gt;
          &lt;table class="table table-hover table-striped" ng-show="records"&gt;
              &lt;thead&gt;
                  &lt;th&gt;#&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Score&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tr data-ng-repeat=" item in records | orderBy : '-score' | limitTo : 10 " ng-click="moreInfo(item)"&gt;
                  &lt;td&gt;{{$index+1}}&lt;/td&gt;
                  &lt;td&gt;{{item.name.slice(5)}}&lt;/td&gt;
                  &lt;td&gt;{{item.score.toFixed(3)}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to choose a time @ which the list will refresh? And it has to be without hitting a refresh button or something like that. Thanks in advance.</p>
  
  <p><strong>EDIT</strong> This is the error I get when I try and use <code>$interval</code> as suggested:</p>
  
  <pre><code>ReferenceError: $interval is not defined
      at Scope.$scope.select (http:xxxxxxxxxx.com/UserQuery/js/script.js:24:7)
      at fn (eval at &lt;anonymous&gt; (https://code.angularjs.org/1.4.0-rc.0/angular.js:12822:15), &lt;anonymous&gt;:2:209)
      at Scope.$get.Scope.$eval (https://code.angularjs.org/1.4.0-rc.0/angular.js:15465:28)
      at https://code.angularjs.org/1.4.0-rc.0/angular.js:21825:13
      at https://code.angularjs.org/1.4.0-rc.0/angular.js:24485:9
      at forEach (https://code.angularjs.org/1.4.0-rc.0/angular.js:332:20)
      at NgModelController.$$writeModelToScope (https://code.angularjs.org/1.4.0-rc.0/angular.js:24483:5)
      at writeToModelIfNeeded (https://code.angularjs.org/1.4.0-rc.0/angular.js:24476:14)
      at https://code.angularjs.org/1.4.0-rc.0/angular.js:24470:9
      at validationDone (https://code.angularjs.org/1.4.0-rc.0/angular.js:24398:9)
  </code></pre>
  
  <p><strong>SOLUTION</strong> With combined efforts from this and another question, I came to a solution. First off, like many on this question mentioned, the key here is the use of <code>$interval</code>. There are a few important things to not about using it though.</p>
  
  <ul>
  <li>It must be included in the dependencies for the controller as
  @mcpDESIGNS mentioned.</li>
  <li><p>In my case, where there is a dropdown therefor multiple things I want
  to <code>$interval</code> over, it is important to close one when you open a new
  one. </p>
  
  <pre>$scope.select = function() {
        $scope.searchText = '';
        $scope.selectedItem = null;
        $interval.cancel(mainInterval);
        $scope.url = '';
        url = 'http:xxxxxxxxxxxxxx.com';
        url += $scope.selectModel.name;
        console.debug("GOING TO: " + url);
        $http.get(url).success(function(data2) {
          $scope.records = [];
          data2.forEach(function(r) {
            $scope.records.push(r);
          });
        });     
        mainInterval = $interval(function() {
          console.debug("UPDATING....");
          console.debug("GETTING NEW FROM " + url);
          $http.get(url).success(function(data2) {
            $scope.records = [];
            data2.forEach(function(r) {
              $scope.records.push(r);
            });
          });
        }, 5000);
      };</pre></li>
  </ul>