<table><tr><td valign="top">
<table>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field01}}" placeholder="{{placeholder01}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field02}}" placeholder="{{placeholder02}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field03}}" placeholder="{{placeholder03}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field04}}" placeholder="{{placeholder04}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field05}}" placeholder="{{placeholder05}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field06}}" placeholder="{{placeholder06}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field07}}" placeholder="{{placeholder07}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field08}}" placeholder="{{placeholder08}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field09}}" placeholder="{{placeholder09}}">
</td>
</tr>

<tr>
<td class="boxes">
<input class="moosetext" type="text" ng-model="{{field10}}" placeholder="{{placeholder10}}">
</td>
</tr>

</table>
</td><td valign="top"> <table> <tr><td valign="top">

\{\{ {{field01}} \}\}

\{\{ {{field02}} \}\}

\{\{ {{field03}} \}\}

\{\{ {{field04}} \}\}

\{\{ {{field05}} \}\}

\{\{ {{field06}} \}\}

\{\{ {{field07}} \}\}

\{\{ {{field08}} \}\}

\{\{ {{field09}} \}\}

\{\{ {{field10}} \}\}

</td></tr> </table>

Place in Header

<!doctype html>
<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<style>
*{
font-family:sans-serif;
font-size:12pt
}
.moosetext {
background-color : #eee;
border: 1px solid #008000;
width: 230px;
height: 16pt;
font-size:12pt
}
.labels{
text-align:right
}
</style>

Auto Conditionals

Advanced Scripts

Creates Drop Down Items on the Fly

<!doctype html>
<html ng-app>
<meta charset="UTF-8">
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>function moose($scope){$scope.fname = [];}</script>

<div ng-controller="moose">
<ul style="list-style: none;">
<li ng-repeat="item in fname ">
<input class="moosetext" ng-model="item.name">
<a href ng-click="fname.splice($index, 1)">-</a>
</li>
<li>
<a class="moosebutt" href ng-click="fname.push({})">add</a>
</li>
</ul>

<br>

<select class="moosetext" ng-model="item" ng-options="item.name for item in fname"></select><br>

<br> <br>

{{ item.name }}

Drops with Text Results. Can be html

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
function Ctrl($scope) {
$scope.items = ['Step 1', 'Step 2', 'Step 2', 'Step 4'];
$scope.selection = $scope.items[0];
}
</script>

<style>
/* Background Color */
.moosetext {
background-color : #99FFCC;
border: 1px solid #008000;
width: 230px;
}
</style>

<div ng-controller="Ctrl">
<select class="moosetext" ng-model="selection" ng-options="item for item in items"></select>
<tt>selection={{selection}}</tt>
<hr/>
<div
class="example-animate-container"
ng-switch on="selection"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}">
<div ng-switch-when="Step 1">aa {{selection}} aaa</div>
<div ng-switch-when="Step 2">bbbbb</div>
<div ng-switch-when="Step 3">bbbbb</div>
<div ng-switch-when="Step 4">bbb {{selection}} bb</div>
<div ng-switch-default>default</div>
</div>
</div>

Check Boxes on and Off

Check Box Conditional
<input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
<span ng-if="checked">
I'm removed when the checkbox is unchecked.
</span>

REF

HTML to Entities

More Conditionals

<span style="{{ {{ nodename1 }} }}display:none"> {{ nodename1a }} {{ {{ nodename1 }} }}<br /></span>
<span style="{{ {{ nodename2 }} }}display:none"> {{ nodename2a }} {{ {{ nodename2 }} }}<br /></span>
<span style="{{ {{ nodename3 }} }}display:none"> {{ nodename3a }} {{ {{ nodename3 }} }}<br /></span>
<span style="{{ {{ nodename4 }} }}display:none"> {{ nodename4a }} {{ {{ nodename4 }} }}<br /></span>
<span style="{{ {{ nodename5 }} }}display:none"> {{ nodename5a }} {{ {{ nodename5 }} }}<br /></span>
<span style="{{ {{ nodename6 }} }}display:none"> {{ nodename6a }} {{ {{ nodename6 }} }}<br /></span>
<span style="{{ {{ nodename7 }} }}display:none"> {{ nodename7a }} {{ {{ nodename7 }} }}<br /></span>
<span style="{{ {{ nodename8 }} }}display:none"> {{ nodename8a }} {{ {{ nodename8 }} }}<br /></span>
<span style="{{ {{ nodename9 }} }}display:none"> {{ nodename9a }} {{ {{ nodename9 }} }}<br /></span>
<span style="{{ {{ nodename10 }} }}display:none"> {{ nodename10a }} {{ {{ nodename10 }} }}<br /></span>