Simple AngularJS list

List to add or delete items from using AngularJS.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div ng-app="app" ng-controller="ListCtrl" class="container">
    <form ng-submit="addItem()">
        <input type="text" ng-model="new_item.name" placeholder="Enter item" class="form-control">
    </form>
    <hr>
    <p><strong>{{remaining()}}</strong> out of <strong>{{items.length}}</strong> are done</p>
    <hr>
    <!-- show a list of items -->
    <table class="table table-striped">
        <tr ng-repeat="i in items | orderBy:'name'">
            <td width="20">
                <input type="checkbox" ng-model="i.done" id="item-{{$index}}">
            </td>
            <td ng-class="{'text-success':i.done}">
                <label for="item-{{$index}}">{{i.name}}</label>
            </td>
            <td>
                <button ng-click="removeItem(i)" class="pull-right btn btn-xs btn-danger text-danger">&times;</button>
            </td>
        </tr>
    </table>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ListCtrl', function ($scope, $http) {
    // create items array
    $scope.items = [{
        done: false,
        name: 'Eggs'
    }];

    // create new item object
    $scope.new_item = {};

    // add a new item to the model
    $scope.addItem = function () {
        $scope.items.push($scope.new_item);
        $scope.new_item = {};
    };

    // remove an item from the items array
    $scope.removeItem = function (i) {
        var idx = $scope.items.indexOf(i);
        $scope.items.splice(idx, 1);
    };

    // create a count of items that are done
    $scope.remaining = function () {
        var count = 0;
        angular.forEach($scope.items, function (item) {
            count += item.done ? 1 : 0;
        });
        return count;
    };
});