Data in table using ng-repeat disappears from page

I have created the following website: http://expenseappusingangular.azurewebsites.net/

I have the following code for the spending details table at the very bottom of the page:

<section id="Details">
        <h2>Spending Details</h2>
        <br />
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Expense</th>
                    <th>Category</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="expense in expenses | orderBy: 'date'">
                    <td>{{ expense.date }}</td>
                    <td>{{ expense.text }}</td>
                    <td>{{ expense.category }}</td>
                    <td>{{ expense.amount > 0 ? '$' : ''}}{{ expense.amount }}</td>
                </tr>
            </tbody>
        </table>
    </section>

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 > 0 ? parseFloat(expense.amount) : 0;
    });
    return sum;
};}

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.

Do you have any idea why the values are disappearing from this bottom table?

Thanks!