Update bootstrap angularjs table with real time data on the fly using ng-repeat

Question

i am using bootstrap table with ng-repeat to populate the table. the issue is that i cannot get the table updated and display data.

i have written drag and drop element in my angularjs. once i drag and drop some file over it i get that information back in my controller.

this drag and drop is a custom directive.

the problem is that i am getting the file detail in my controller

 $scope.getFiles = function(res)
     {
        $scope.fileList = res;
        console.log(res);
     }

In HTML

<file-drop fetch-files="getFiles"></file-drop>

where getFiles is the function getting called in the controller and returing the value.while i do console.log and dragand drop i can see Object in the console.

But when i assign this

$scope.fileList = res;

In HTML

<table  class="table table-condensed" >
 <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Size</th> 
        <th>Last Modified</th>
      </tr>
  </thead>
  <tbody>
      <tr ng-repeat="file in fileList">
        <td>{{file.name}}</td>
        <td>{{file.type}}</td>
        <td>{{file.size}}</td>
        <td>{{file.lastModified}}</td>
      </tr>
   </tbody> 
</table>

and call this in html using ng-repeat i do not see anything. In the directive the values are [pushed in an array and previous drop info is stored unless browser is refreshed.

how can i update table in real time. My Object struct is as below

[{name: "Topic_modelling.xlsx", type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size: 39274, lastModified: Mon Aug 03 2015 13:40:53 GMT+0530 (IST)}]

Answer 1

This happens because you are replacing whole object.

Angular is watching the previous one, which you overide by

$scope.fileList = res;

Easiest think is using "controller as" syntax of controllers so your object will be taken as property in template.

https://docs.angularjs.org/api/ng/directive/ngController

So your controller would become

... 
this.getFiles = function(res)
     {
        this.fileList = res;
        console.log(res);
     }

and template

<div ng-controller="NameOfController as fileCtrl"

...

<tr ng-repeat="file in fileCtrl.fileList">

after that angular watch property of fileCtrl object and not the primitive value