JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js" text="script/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js" text="script/javascript"></script>
    <div ng-app="sampleApp" ng-controller="wizardCtrl">
        <div>Angular wizard
            <ul>
                <li>Every step in the wizard has it's own controller/template/scope</li>
                <li>The steps in the wizard are dynamic, meaning the next step depends on the value of the current step</li><br/>
                (for instance: if the value in step 1 &lt; 10, the next step is step 2, else the next step is step 3)
            </ul>
        </div>
        <flex-wizard initial-step="initialStep"></flex-wizard>
    </div>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
}
#history ul {
    background: rgb(55, 1, 59);
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#history li {
    display: inline;
}
#history a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: white;
    background-color: rgb(85, 3, 91);
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}
#history a:hover {
    background: rgb(55, 1, 59);
}
div.main {
    padding-top: 30pt;
}

JavaScript

var FlexWizard;
(function (FlexWizard) {
    FlexWizard.stepNextEvent = "flex.wizard.stepNextEvent";
    FlexWizard.stepBackEvent = "flex.wizard.stepBackEvent";

    angular.module('flex.wizard', ['ng']);

    /**
     * Implements the main wizard functionality
     */
    var WizardHandler = (function () {
        function WizardHandler(wizardContentPlaceHolder, wizardScope, $injector, $q, $timeout, $compile, $sce, $http, $templateCache, $controller) {
            this.wizardContentPlaceHolder = wizardContentPlaceHolder;
            this.wizardScope = wizardScope;
            this.$injector = $injector;
            this.$q = $q;
            this.$timeout = $timeout;
            this.$compile = $compile;
            this.$sce = $sce;
            this.$http = $http;
            this.$templateCache = $templateCache;
            this.$controller = $controller;
            this.takenSteps = [];
            this.history = [];
            this.busyCount = 0;
        }
        /**
         * The wizard has a lot of async code. (next eval / step creation).
         * Whenever such an async call is in progress, this method returns true.
         */
        WizardHandler.prototype.isBusy = function () {
            return this.busyCount > 0;
        };

        /**
         * Starts the wizard by invoking the initial step.
         */
        WizardHandler.prototype.start = function () {
            return this.invokeStep(this.wizardScope.initialStep);
        };

        /**
         * Returns the current step of the wizard.
         */
        WizardHandler.prototype.currentStep = function () {
            if (this.takenSteps.length == 0) throw 'current step is undefined';
            var currentStep = this.takenSteps[this.takenSteps.length - 1];
            return currentStep;
        };

        /**
         * Steps on to the next step.
         * - Invoke the next() function of the current step
         * - Resolve all promises for the next step
         * - go to the...