javascript - AngularJS: page displays NaNs and displays data when it gets from server. How to prevent it? -

consider conroller

  $scope.transaction = {};   $scope.transactions = transaction.query();    $scope.save = function() {     var transaction = new transaction();     transaction.name = $scope.transaction['name'];     transaction.debit = $scope.transaction['debit'];     transaction.date = $scope.transaction['date'];     transaction.amount = $scope.transaction['amount'];     transaction.category = $scope.transaction['category'].uuid;      //noinspection jsunresolvedfunction     transaction.$save();     $scope.transactions.push(transaction);     console.log('transaction saved successfully', transaction);   }; 

and html

<tbody ng-repeat="transaction in transactions | orderby: transaction.created_on">       <td>{{ transaction.name }}</td>       <td>{{ transaction.amount | currency }}</td>       <!-- custom filter display type of transaction -->       <td>{{ transaction.debit | transactiontype }}</td>       <!-- added dateinmillis pass date filter angular way -->       <td>{{ transaction.created_on | dateinmillis | date: 'medium'}}</td>       <td>{{ transaction.category.name }}</td>       <td> </tbody> 

problem
when add transaction, displays bunch of nans , once server comes saved data, replaces nans actual data

how can prevent happening? not ux

without seeing code related transaction object hard know sure problem be. @ glance think need callback function attached transaction.$save() method.

transaction.$save(function(u, putresponseheaders) {     // $save's success callback     $scope.transactions.push(transaction);     console.log('transaction saved successfully', transaction); });