Edit in JSFiddle

function TodoCtrl($scope) {
    $scope.todos = [];
}


$(document).ready(function () {
    $('#new-status form').submit(function (e) {
        e.preventDefault();

        var text = $('#new-status').find('textarea').val();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            dataType: 'json',
            data: {
                text: text,
                json: JSON.stringify({
                    'text': text
                })
            },
            success: function (data) {
                var $li = $('<li>');
                var $input = $('<input>', {
                    'type': 'checkbox'
                });
                $li.append($input);
                $li.append($('<label>', {
                    'text': data.text,
                    'data-text': data.text
                }));

                $input.change(function () {
                    $('h1 span').text($('#new-status input:not(:checked)').length);
                    var $label = $(this).parent().find('label');

                    $label.text($label.attr('data-text') + ($(this).is(":checked") ? " (Done!)" : ""));
                }).trigger('change');

                $('#statuses').append($li);
                $('#new-status').find('textarea').val('');
            }
        });
    });
});

<section ng-app>
    <div id="new-status" ng-controller="TodoCtrl">
         <h1>Todo (<span>0</span> left)</h1>

        <form>
            <textarea id="new-status"></textarea>
            <button type="submit">Add</button>
        </form>
        <ul id="statuses">
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>
            </li>
        </ul>
    </div>
</section>