Angular: Form Builder

Made a simple form-builder demo for my work. Has sorting, almost every type of input, and works pretty well. Could use a few more options for help text and drag-n-drop sorting.

by bryangrimes

HTML

<html>
    <head>
        <script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
    </head>
    <body>
       <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
              <div class="container-fluid">
                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">Doing Stuff V.01</a>
                <div class="nav-collapse">
                  <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown">
                      <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li>
                            <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                            <ul class="dropdown-menu sub-menu">
                                <li><a href="#">Here</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Nav header</li>
                                <li><a href="#">No Here</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="nav-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                    <li class="divider-vertical"></li>
         ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 20px;
    margin-left: 30px
}

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

pre {
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

JavaScript

function Controller() {
    $scope = this;
    this.fields = [
        {
        "apiName": "lName",
        "displaytext": "Last Name",
        "placeholder": "enter last name",
        "type": "text",
        "order": 1,
        "required": true},
    {
        "apiName": "startDate",
        "displaytext": "Start Date",
        "placeholder": "",
        "type": "date",
        "order": 2,
        "required": false},
    {
        "apiName": "person",
        "displaytext": "Agent",
        "placeholder": "Select Agent",
        "type": "select",
        "order": 10,
        options: [
            {
            name: "select agent",
            value: 0},
        {
            name: "Aaron",
            value: 100},
        {
            name: "Fred",
            value: 1}
        ]}
    ];
}