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

What Is the AngularJS Online Compiler?

The AngularJS Online Compiler lets you write and run AngularJS 1.8 code directly in your browser with instant live preview. It provides an HTML editor for templates with directives and a JavaScript editor for controllers and module logic. AngularJS is loaded via CDN, giving you access to two-way data binding, expressions, ng-repeat, ng-model, custom directives, and the full AngularJS 1.x API without any local installation.

How It Works

Write your HTML template with AngularJS directives (ng-app, ng-controller, ng-model, etc.) in the left-hand HTML editor.
Define your AngularJS module, controllers, and logic in the JavaScript editor below.
Click the Run button in the header toolbar.
The compiler builds a sandboxed iframe that loads AngularJS 1.8 from the Google CDN.
Your HTML template and JavaScript are injected into the iframe and AngularJS bootstraps automatically.
The output preview on the right shows your running AngularJS application with full interactivity.

Step-by-Step Example

Follow these steps to create a simple two-way binding demo:

In the HTML editor, add a wrapper <div> with ng-app="myApp" and ng-controller="MyCtrl as vm".
Inside the wrapper, add an <input> element with ng-model="vm.name" and a <p> that displays {{vm.name}}.
In the JavaScript editor, define angular.module("myApp", []).controller("MyCtrl", function() { this.name = "World"; }).
Click Run to see the result. Typing in the input field instantly updates the greeting text through two-way data binding.

Use Cases

Learning AngularJS — Practice directives, expressions, and controllers without setting up a project locally.
Prototyping templates — Quickly test ng-repeat lists, ng-show/ng-hide toggles, and form validation.
Maintaining legacy code — Test AngularJS 1.x snippets when working on legacy applications that have not migrated to modern Angular.
Exploring two-way binding — Experiment with ng-model and scope watchers to understand the AngularJS digest cycle.
Teaching — Demonstrate AngularJS concepts in classrooms or tutorials with zero setup for students.

Limitations & Notes

This uses AngularJS 1.8, the legacy version. For modern Angular (v15+), use the Angular Modern compiler.
Only the core AngularJS library is loaded. ngRoute, ui-router, and other modules are not available.
No TypeScript support. AngularJS uses plain JavaScript.
Services and factories work within a single module but complex multi-module setups may not be supported.
AJAX calls via $http are limited because there is no server backend.
Code is not saved between sessions. Copy your work before navigating away.
The output runs in a sandboxed iframe. Some browser APIs may be restricted.

Frequently Asked Questions

What version of AngularJS is used?

AngularJS 1.8, the legacy version of Angular.

Where can I use modern Angular instead?

Use the Angular Modern compiler (angular-modern.html) for Angular 15+ with components and template syntax.

Does ng-model work?

Yes, ng-model and two-way data binding work fully in this AngularJS environment.

Can I create custom directives?

Yes, you can define and use custom directives in the AngularJS code editor.

Are services and factories supported?

Basic support is available. You can define services and factories within your module.

Does routing work?

No, ngRoute and ui-router are not loaded. This is a single-view environment.

Does this support TypeScript?

No, this is AngularJS which uses plain JavaScript. For TypeScript, use the Angular Modern compiler.

Can I save my code?

No, code is not saved between sessions. Copy your code before leaving the page.

AngularJS Compiler