AngularJS Online Compiler | Free Online Compiler

HTML + CSS

<div class="wrap" ng-app="demoApp" ng-controller="MainCtrl as vm">
    <header class="hero">
        <p class="muted">AngularJS 1.8</p>
        <h1>Task Manager</h1>
        <p>Hello, {{vm.name}}!</p>
        <div class="controls">
            <input type="text" ng-model="vm.name" placeholder="Your name">
            <input type="text" ng-model="vm.newTask" placeholder="New task">
            <button ng-click="vm.addTask()">Add Task</button>
        </div>
    </header>

<section class="panel">
        <h2>Tasks</h2>
        <p class="muted">
            Filter:
            <input type="text" ng-model="vm.query" placeholder="Search tasks">
        </p>
        <ul>
            <li ng-repeat="task in vm.tasks | filter:vm.query track by $index">
                <label>
                    <input type="checkbox" ng-model="task.done">
                    <span ng-class="{done: task.done}">{{task.title}}</span>
                </label>
                <button class="ghost" ng-click="vm.removeTask($index)">Remove</button>
            </li>
        </ul>
    </section>
</div>

AngularJS Code

Output

AngularJS Compiler