title: Angular Table Refresh
body: <p>I have an api that gets called on page load. The data from the api is loaded into a table via angular ng-repeat. I also have a javascript function that gets called every 10 seconds that calls the same api for the same dataset. I Would like to know how i can apply the new dataset to the table and replace the old if the dataset changes and how to visually show this change with animation. The code is below.</p>
  
  <p>Table code</p>
  
  <pre><code>&lt;body ng-app="myApp" ng-controller="ScansController"&gt;
  &lt;div class="bs-example" id="scan-table"&gt;
      &lt;table id="scansTable" class="table table-striped"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ScanId&lt;/th&gt;
                  &lt;th&gt;First Name&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;/th&gt;
                  &lt;th&gt;Time Stamp&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr ng-repeat="scan in Scans"&gt;
                  &lt;td&gt;
                      {{scan.scanId}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{scan.firstName}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{scan.lastName}}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {{scan.timeStamp}}
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Javascipt interval code</strong></p>
  
  <pre><code>&lt;script&gt;
    window.setInterval(function () {
      $.ajax({
          url: 'api/scans/',
          type: 'Get',
          dataType: 'json',
          success: function (data) {                
          //Something here
          },
          error: function () {
            alert("something failed");
          }
       });
  
      }, 10000);
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Angular Code</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  
  myApp.service('dataService', function ($http) {
  
  this.getData = function () {
  
      return $http({
          method: 'GET',
          url: '/api/scans/'
      });
  }
  });
  
  myApp.controller('ScansController', function ($scope, dataService) {
  $scope.Scans = [];
  
      dataService.getData().then(function (result) {
          $scope.Scans = result.data;
          console.log(result.data);
      }); 
  });
  </code></pre>