JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<ng-form name="myForm">
    <div class="well" form-spice>
        <h3>Level 1 - Form Name: {{formName}}</h3>
        <ng-form name="myFormx">
            <div class="well" form-spice>
                <h3>Level 2 - Form Name: {{formName}}</h3>
                <div class="well" form-spice>
                    <h3>Level 3 - Form Name: {{formName}}</h3>
                </div>
            </div>
        </form>
    </div>
</form>

JavaScript

(function () {

    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        app.directive("formSpice", function () {
            return {
                restrict: "A",
                require: "^^^form",
                scope: {},
                link: function (scope, element, attrs, ctrl) {
                    scope.formName = ctrl.$name;
                }
            };
        });

        angular.bootstrap(document, ['myApp']);
    });


}());