title: How to refresh an angular JS table when the data provider is changed dynamically?
body: <p>I am loading some Json data from server and want to show it in an angular table. I am using the <a href="https://github.com/maxisam/Angular-XUI/tree/master/xuiTable/Demo" rel="nofollow">xuiTable</a> for my table. 
  My problem is that , the data that I load is not shown , and to me it seems that table data provider is not refreshed.
  Here are my html and app.js codes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="resources/jquery/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/lib/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="resources/jquery/jquery-ui-1.11.4/external/jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="resources/jquery/jquery-ui-1.11.4/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script src="resources/jquery/jquery-ui-1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script src="resources/jquery/jquery.fileupload.js"&gt;&lt;/script&gt;
  
  
      &lt;script src='resources/js/pagination.js'&gt;&lt;/script&gt;
      &lt;script src='resources/js/xuiTable.js'&gt;&lt;/script&gt;
      &lt;script src="resources/js/app.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="resources/css/style.css" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"&gt;
      &lt;link data-require="bootstrap-css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="resources/jquery/jquery-ui-1.11.4/jquery-ui.min.css"&gt;
      &lt;link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css"/&gt;
      &lt;link rel="stylesheet" href="resources/css/app.css"/&gt;
  
  
  
  
  
  &lt;table xui-table="test" table-headers="TableHeader" table-data="List" items-per-page='10' page-window='PageSize' table-pager='true' table-filter='searchfn(input)' table-filter-factor='search'&gt;
              &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td class="customerId"&gt;{{row.customerId }} &lt;/td&gt;
                  &lt;td class="clusterId"&gt;{{row.clusterId}} &lt;/td&gt;
                  &lt;td class="modelVersion"&gt;{{row.modelVersion}} &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>'use strict';
  
  var bigspender = {};
  
  var App = angular.module('bigspender',['xui.table']);
  
  
  
  App.constant('TableHeader', [{
      header: 'customerId',
      title: 'Customer ID',
      sortable: true
  }, {
      header: 'clusterId',
      title: 'Cluster ID',
      sortable: true
  }, {
      header: 'modelVersion',
      title: 'Model Version',
      sortable: true
  }
  
  ]);
  
  
  App.controller("fileUploadController", function($scope, $http,TableHeader ) {
  
      $scope.name = 'World';
      $scope.TableHeader = TableHeader;
      $scope.List = [];
  
      $scope.search = {};
  
      /*
      *
      *
      *
      * for (var i = 1; i &lt; 65; i++) {
       $scope.List.push({
       "customerId": "customerId" + i,
       "clusterId": "clusterId " + i,
       "modelVersion": "modelVersion " + i
       });
  
  
       }
      *
      *
      * */
  
      $scope.searchfn = function(input) {
  
          if ( !! input) {
              var tmp = false;
              angular.forEach($scope.search, function(val, key) {
                  if ( !! (input[key].indexOf(val || '') !== -1)) {
                      tmp = true;
                  }
              });
              return tmp;
          }
      };
  
      $scope.loader = {
          loading: false
  
      };
  
  $scope.continueFileUpload=function () {
      var uploadUrl = "continueFileUpload";
      var formData = new FormData();
      formData.append('file', $('input[type=file]')[0].files[0]);
      $http({
          method: 'POST',
          url: uploadUrl,
          headers:{'Content-Type': false},
          data: formData,
          transformRequest: function(data, headersGetterFunction) {
              return data; // do nothing! FormData is very good!
          }
      })
          .success(function (data, status) {
             // alert("Your CSV file was uploaded successfully.");
              angular.element($('#showCluster')).show();
              $scope.loader.loading = true ;
          })
  }
      $scope.reset = function(){
          $scope.loader.loading = false ;
      }
      $scope.clusterCustomers = function (){
          var url = "classify";
         var response = $http({
              method: 'GET',
              url: url
  
          })
  
  
          response.success(function(data, status, headers, config) {
  
                /*      $scope.List.push({
                          "customerId": obj.customerId + "1",
                          "clusterId": obj.clusterId+ "1",
                          "modelVersion": obj.modelVersion+ "1"
  
                  });*/
  //this is the part that I am filling the List (data provider)
                  for (var i = 1; i &lt; 65; i++) {
                      $scope.List.push({
                          "customerId": "customerId" + i,
                          "clusterId": "clusterId " + i,
                          "modelVersion": "modelVersion " + i
                      });
  
  
                  }
  
              $scope.$apply;
  
          });
        //  });
          response.error(function(data, status, headers, config) {
              alert( "Exception details: " + JSON.stringify({data: data}));
          });
  
  
  
      }
  
  
  
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I initilize the dataprovider at the very beginning (where I define the controller) , the table works but when I try to dynamically fill the data provider , it does not refresh. I also used $scope.apply but it did not work.
  Could you please help me on this? How can I refresh the table after updating the data provider?</p>