AngularJS: Expense Tracker

HTML

<link rel="stylesheet" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
<h2>Expense Tracker</h2>

<div ng:controller="CartForm">
    <table class="table">
        <tr>
            <th>Description</th>
            <th><a href ng:click="orderByField='category'">Category</a>

            </th>
            <th>Date</th>
            <th>Cost</th>
            <th></th>
        </tr>
        <tr ng:repeat="item in invoice.items | orderBy:orderByField">
            <td>
                <input type="text" ng:model="item.description" class="input-large">
            </td>
            <td>
                <input type="text" ng:model="item.category" class="input-small">
            </td>
       
            <td>
                <input type="number" ng:model="item.cost" ng:required class="input-mini">
            </td>
            <td>[<a href ng:click="removeItem($index)">X</a>]</td>
        </tr>
        <tr>
            <td><a href ng:click="addItem($index)" class="btn btn-small">Add Item</a>

            </td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>{{total() | currency}}</td>
        </tr>
    </table>
</div>

CSS

.input-medium {
    width:130px
}

JavaScript

function CartForm($scope) {
    $scope.filters = {};
    $scope.orderByField = 'date';
    $scope.invoice = {
        items: [{
  
            category: 'Bills',
            description: 'item',
            cost: 9.95
        }]
    };
    $scope.addItem = function () {
        $scope.invoice.items.push({
            category: 'Misc',
            description: '',
            cost: 0
        });
    };

    $scope.removeItem = function (index) {
        $scope.invoice.items.splice(index, 1);
    };

    $scope.total = function () {
        var total = 0;
        angular.forEach($scope.invoice.items, function (item) {
            total += item.cost;
        });

        return total;
    };

}