Edit in JSFiddle

function todo() {
	return {
        scope: {},
        controller: function () {
        	this.label = '';
            this.todos = [{
                label: 'Learn Angular',
                complete: false
            },{
                label: 'Deploy to S3',
                complete: true
            },{
                label: 'Rewrite Todo Component',
                complete: true
            }];
            this.updateIncomplete = function () {
                return this.todos.filter(function (item) {
                    return !item.complete;
                }).length;
            };
            this.deleteItem = function (index) {
                this.todos.splice(index, 1);
            };
            this.onSubmit = function (event) {
                if (this.label.length) {
                    this.todos.unshift({
                        label: this.label,
                        complete: false
                    });
                    this.label = '';
                }
                event.preventDefault();
            };
        },
        controllerAs: 'vm',
    	template: [
            '<div class="todo">',
                '<form ng-submit="vm.onSubmit($event);">',
                    '<h3>Todo List: ({{ vm.updateIncomplete() }} of {{ vm.todos.length }})</h3>',
                    '<div class="todo__fields">',
                        '<input ng-model="vm.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-repeat="item in vm.todos" ng-class="{',
                        '\'todo__list--complete\': item.complete',
                    '}">',
                        '<input type="checkbox" ng-model="item.complete">',
                        '<p>{{ item.label }}</p>',
                        '<span ng-click="vm.deleteItem($index);">',
                            '<i class="fa fa-times-circle"></i>',
                        '</span>',
                    '</li>',
                '</ul>',
            '</div>'
        ].join('')
    };
}

angular
	.module('Todo', [])
	.directive('todo', todo);

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