Q:

Load Data from Database Without Blinking Angular Js

Am loading data from database to a table in html with angualar js. am also using interval so as to make the table reload every 10 seconds to get new data that has just been inputed by other users.
Problem:
The table blinks every time it reloads. making the page look funny like it has a glitch.
What am looking for:
Is there a way i can make the new data just slide in from the top of the table and become number one while the rest re adjust underneath it And become number two, three and so on. i was made to believe Angular Js is magical reason why i opted for it instead of using my usual AJAX
Angular Code
 var supDetails = angular.module("supDetails", ['datatables']);

     supDetails.controller('supportController', function($scope, $http, $interval) {
          $scope.names = [];
$scope.isFirst = true;
$scope.loadData = function() {    
    var httpRequest = $http({
        method: 'GET',
        url: 'anfil.php?ins=sup'

    }).success(function(data, status) {
    console.log('loading..');
        $scope.names = data;

       if(!$scope.isFirst){
          angular.forEach(data,function(key,val){
            $scope.names[key] = data[key];
          });
        }            
        $scope.isFirst = false;
    });

};

         $scope.loadData();

// Function to replicate setInterval using $timeout service.

   $interval(function () {
         $scope.loadData();
}, 10000);

    });

My HTML
 <!-- /.col -->
    <div class="col-md-9" ng-app = "supDetails" ng-controller="supportController">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Messages</h3>
          <!-- /.box-tools -->
           <div class="box-tools pull-right">
            <div class="has-feedback">
             <button type="button" ng-click="loadData()" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body no-padding">

          <div class="mailbox-messages">
            <table datatable="ng" class="table table-hover table-striped">
             <thead>
            <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
            </thead>
              <tbody>
              <tr ng-repeat="x in names">
                <td class="mailbox-star"><a href="#"><i class="fa fa-circle text-blue"></i></a></td>
                <td class="mailbox-name"><a href="read-mail.html">{{x.user_id}}</a></td>
                <td class="mailbox-subject"><b>{{x.ticket_title}}</b> - {{x.subject}}
                </td>
                <td class="mailbox-date">{{x.ticket_open_date}}</td>
              </tr>

              </tbody>
              <tfoot>
                 <tr>
              <th>Stat</th>
              <th>Name</th>
              <th>Problem</th>
              <th>Time</th>
            </tr>
              </tfoot>
            </table>
            <!-- /.table -->
          </div>
          <!-- /.mail-box-messages -->
        </div>
        <!-- /.box-body -->
        </div>
      <!-- /. box -->
    </div>
    <!-- /.col -->

A:

I think its your css problem which doesn't have a minimum height as you can see in this snippet its not blinking..
If you still want data to appear slide from up to down, You can uncomment the code in the answer, in this way it will remove row one by one from the table and replace it with the new one.

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http,$interval) {

    $scope.people = [];
    $scope.isFirst = true;
    $scope.loadPeople = function() {    
        var httpRequest = $http({
            method: 'GET',
            url: 'https://jsonplaceholder.typicode.com/users'

        }).success(function(data, status) {
        console.log('loading..');
            $scope.people = data;
            
           /* if(!$scope.isFirst){
              angular.forEach(data,function(val,key){
                $scope.people[key] = data[key];
              });
            }            
            $scope.isFirst = false;*/
        });

    };
    
    $scope.loadPeople();
      $interval(function () {
              $scope.loadPeople();
    }, 10000);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
  
<table class="table">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>UserNmae</th>
    </tr>
    <tr ng-repeat="person in people">
        <td>{{person.id}}</td>
        <td>{{person.name}}</td>
        <td>{{person.username}}</td>
    </tr>
</table>
</div>
</div>

