Edit in JSFiddle

var Todo = ng
.Component({
    selector: 'todo',
    directives: [ng.CORE_DIRECTIVES, ng.FORM_DIRECTIVES],
    template: [
        '<div class="todo">',
        	'<form (submit)="onSubmit($event);">',
        		'<h3>Todo List: ({{ updateIncomplete() }} of {{ todos.length }})</h3>',
        		'<div class="todo__fields">',
        			'<input [(ng-model)]="label" class="todo__input">',
	        		'<button type="submit" class="todo__submit">',
        				'Add <i class="fa fa-check-circle"></i>',
        			'</button>',
        		'</div>',
        	'</form>',
            '<ul class="todo__list">',
        		'<li *ng-for="#item of todos; #i = index" [ng-class]="{',
        			'\'todo__list--complete\': item.complete',
        		'}">',
        			'<input type="checkbox" [(ng-model)]="item.complete">',
        			'<p>{{ item.label }}</p>',
        			'<span (click)="deleteItem(i);">',
        				'<i class="fa fa-times-circle"></i>',
        			'</span>',
        		'</li>',
        	'</ul>',
        '</div>'
    ].join('')
})
.Class({
    constructor: function () {
        this.label = '';
        this.todos = [{
        	label: 'Learn Angular',
            complete: false
        },{
        	label: 'Deploy to S3',
            complete: true
        },{
        	label: 'Rewrite Todo Component',
            complete: true
        }];
    },
    updateIncomplete: function () {
    	return this.todos.filter(function (item) {
        	return !item.complete;
        }).length;
    },
    deleteItem: function (index) {
    	this.todos.splice(index, 1);
    },
    onSubmit: function (event) {
        if (this.label.length) {
            this.todos.unshift({
                label: this.label,
                complete: false
            });
            this.label = '';
        }
        event.preventDefault();
    }
});

document.addEventListener('DOMContentLoaded', function () {
	ng.bootstrap(Todo);
});
<todo></todo>