title: Data in table using ng-repeat disappears from page
body: <p>I have created the following website:
  <a href="http://expenseappusingangular.azurewebsites.net/" rel="nofollow noreferrer">http://expenseappusingangular.azurewebsites.net/</a></p>
  
  <p>I have the following code for the spending details table at the very bottom of the page:</p>
  
  <pre><code>&lt;section id="Details"&gt;
          &lt;h2&gt;Spending Details&lt;/h2&gt;
          &lt;br /&gt;
          &lt;table class="table table-hover"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Date&lt;/th&gt;
                      &lt;th&gt;Expense&lt;/th&gt;
                      &lt;th&gt;Category&lt;/th&gt;
                      &lt;th&gt;Amount&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr data-ng-repeat="expense in expenses | orderBy: 'date'"&gt;
                      &lt;td&gt;{{ expense.date }}&lt;/td&gt;
                      &lt;td&gt;{{ expense.text }}&lt;/td&gt;
                      &lt;td&gt;{{ expense.category }}&lt;/td&gt;
                      &lt;td&gt;{{ expense.amount &gt; 0 ? '$' : ''}}{{ expense.amount }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/section&gt;
  
  function ExpenseController($scope) {
  $scope.appTitle = "Expense App using Angular";
  $scope.saved = localStorage.getItem('expenses');
  $scope.expenses = (localStorage.getItem('expenses') !== null) ? JSON.parse($scope.saved) : [];
  localStorage.setItem('expenses', JSON.stringify($scope.expenses));
  
  $scope.addExpense = function () {
      $scope.expenses.push({
          text: $scope.expenseText,
          category: $scope.categoryText,
          amount: $scope.amountText,
          date: $scope.dateText
      });
      $scope.expenseText = '';
      $scope.categoryText = '';
      $scope.amountText = '';
      $scope.dateText = '';
      localStorage.setItem('expenses', JSON.stringify($scope.expenses));
  };
  
  $scope.countExpenses = function () {
      var count = 0;
      angular.forEach($scope.expenses, function (expense) {
          count += 1;
      });
      return count;
  };
  
  $scope.totalAmountByCategory = function (category) {
      var sum = 0;
      angular.forEach($scope.expenses, function (expense) {
          sum += expense.category == category ? parseFloat(expense.amount) : 0;
      });
      return sum;
  };
  
  $scope.totalAmount = function () {
      var sum = 0;
      angular.forEach($scope.expenses, function (expense) {
          sum += expense.amount &gt; 0 ? parseFloat(expense.amount) : 0;
      });
      return sum;
  };}
  </code></pre>
  
  <p>After I enter in an expense or two, wait a few minutes, and then refresh the page, the data in the table at the bottom disappears but is still reflected in the category table and the chart.  I checked the local storage in the browser, and the expenses object is still there.</p>
  
  <p>Do you have any idea why the values are disappearing from this bottom table?</p>
  
  <p>Thanks!</p>