ng-form1.html

<form name="myForm" class="form-horizontal">
	<fieldset>
		<legend>Contact (by hand-coded AngularJS HTML template)</legend>

		<div class="control-group" ng-class="{error: myForm.fname.$invalid}">
			<label class="control-label" for="fname">Name:</label>
			<div class="controls">
				<input ng-model="model.contact.name" name="fname" id="fname" type="text" class="input-xlarge" required >
				<span ng-show="myForm.fname.$error.required" class="help-inline">Required</span>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label" for="email">Email:</label>
			<div class="controls">
				<div class="input-prepend">
					<span class="add-on"><i class="icon-envelope"></i></span>
					<input ng-model="model.contact.email" name="email" id="email" type="email" class="input-xlarge" required />
                </div>
				<span ng-show="myForm.email.$error.required" class="help-inline">Required</span>
				<span ng-show="myForm.email.$error.email" class="help-inline">Not an Email</span>
			</div>
		</div>

		<!-- TODO Multi-Value address line à la https://bootsnipp.com/snipps/dynamic-form-fields -->

		<div class="control-group error">
			<label class="control-label" for="country">Country:</label>
			<div class="controls">
			    <!-- TODO auto complete model should be read from a model as well.. -->
				<input ng-model="model.contact.country" autocomplete="off" type="text" id="country" class="input-xlarge search-query" data-provide="typeahead"
					data-items="4" data-source='["Switzerland","India"]'>
				<!-- TODO do this right.. only show in case of validation errors... -->
				<span class="help-inline text-error">Country is required</span>
			</div>
		</div>

		<div class="control-group info">
			<label class="control-label" for="phone">Fone:</label>
			<div class="controls">
				<div class="input-prepend">
					<!-- TODO show country code dialing prefix in function of Country chosen above.. -->
					<span class="add-on">+41</span>
					<input ng-model="model.contact.phone" type="tel" id="phone" class="input-xlarge" />
				</div>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label" for="activesince">Active since:</label>
			<div class="controls">

				<div class="input-append">
					<!-- TODO ng-model="model.contact.since"
							  how do you use ui-date-format? is ui-date attribute, without =, correct? -->
					<input  ui-date type="text" ng-required="true" id="activesince" class="input-xlarge" />
					<span class="add-on"><i class="icon-calendar"></i></span>
				</div>
			</div>
		</div>

		<div class="control-group">
			<label class="control-label" for="age">Age:</label>
			<div class="controls">
				<div class="input-append">
					<input ng-model="model.contact.age" type="text" ng-required="true" id="age" class="input-xlarge" />
				</div>
				<span class="help-inline">If &lt;18, then new field for Parent's Email will show.</span>
			</div>
		</div>

		<div class="control-group" ng-show="model.contact.age < 18">
			<label class="control-label" for="parentEmail">Parent's Email:</label>
			<div class="controls">
				<div class="input-prepend">
					<span class="add-on"><i class="icon-envelope"></i></span>
					<input ng-model="model.contact.parentEmail" id="parentEmail" type="email" class="input-xlarge" />
					<!-- TODO Validation rule for email -->
				</div>
			</div>
		</div>

		<div class="control-group">
			<div class="alert alert-block">
				<!-- Idea: Always auto-save, intentionally No SAVE button here? Generator should allow to choose autoSave vs. explicitSave style? -->
  				<a ng-click="save()" ng-disabled="isClean() || myForm.$invalid" class="btn btn-large btn-primary">Save</a>
				<!--<a ng-disabled="true" class="disabled btn btn-large btn-inverse pull-right">Cancel</a>
				<h4>Saving changes...</h4>
				<p>Press Cancel to Undo.</p>-->
				<!-- TODO <a ng-click="destroy()" ng-show="model.contact.id" class="btn btn-large btn-danger pull-right">Delete</a> -->
			</div>
		</div>
	</fieldset>
</form>