title: $interval happening too many times
body: <p>Hopefully I can explain this so you can understand. I just finished up a question getting help with angular's <code>$interval</code> functionality. Let's start from the basics first:</p>
  
  <ul>
  <li>I have a dropdown where a user selects an option.</li>
  <li>That action calls a select method which makes a <code>$http.get( )</code>
  request.</li>
  <li>The resulting data is then placed into a list using <code>mg-repeat</code>.</li>
  <li>The data can be updated from another service, so I need this list to
  periodically poll and refresh the list, enter <code>$interval</code></li>
  </ul>
  
  <p>In this code below, I am close, but not quite there. Say I want to refresh the list once every 10 seconds, if I choose option 1 from the start, it will refresh option 1's list every 10 seconds. Great right?</p>
  
  <p>Now if I choose option 2, in terms that I understand, it seems like it creates another thread. It changes the <code>$http.get( )</code> where it goes from option 1 to option 2, but it keeps option 1's <code>$interval</code> thread open. So it pings option 2's <code>$http.get( )</code> twice in 10 seconds. Once following the time interval of the first request ever(for option 1) and once in the interval of me selecting option 2.</p>
  
  <p>Here is the JS code for the select function. This happens when a user selects something from the dropdown:</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);
          });
        });
        $interval(function() {
          $http.get(url).success(function(data2) {
          $scope.records = [];
          data2.forEach(function(r) {
              $scope.records.push(r);
          });
        });
      }, 30000);
  };
  </code></pre>
  
  <p>And here is the section of html in question:</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>Let me know if i need to clarify some. Thanks.</p>