Q:

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

Consider this 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 this HTML
<tbody ng-repeat="transaction in transactions | orderBy: transaction.created_on">
      <td>{{ transaction.name }}</td>
      <td>{{ transaction.amount | currency }}</td>
      <!-- custom filter to display type of transaction -->
      <td>{{ transaction.debit | transactionType }}</td>
      <!-- added dateInMillis to pass to date to filter Angular way -->
      <td>{{ transaction.created_on | dateInMillis | date: 'medium'}}</td>
      <td>{{ transaction.category.name }}</td>
      <td>
</tbody>

Problem
When I add transaction, it immediately displays bunch of NaNs and then once the server comes back with saved data, it replaces those NaNs with actual data
How can I prevent that from happening? Its not a good UX

A:

Without seeing all the code related to the Transaction object its hard to know for sure what the problem could be. At a glance I think you need a callback function attached to transaction.$save() method.
transaction.$save(function(u, putResponseHeaders) {
    // This is $save's success callback
    $scope.transactions.push(transaction);
    console.log('transaction saved successfully', transaction);
});

