AngularJS Live Example

HTML

<script src="https://code.angularjs.org/1.4.2/angular.min.js" ng:autobind></script>

<!-- AngularJS Example Code: -->

<script>
angular.directive('ui:pe', function(expression, compiledElement) {
    var compiler = this;
    compiledElement.attr('href', '');
    return function(linkElement) {
        var currentScope = this;
    };
});
    
  function FormController(){
    this.user = {
      name: 'John Smith',
      address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},
      contacts:[{type:'phone', value:'1(234) 555-1212'}]
    };
    this.state = /^\w\w$/;
    this.zip = /^\d\d\d\d\d$/;
  }
</script>
<div ng:controller="FormController" class="example">
   <label>Name:</label><br/>
  <input type="text" name="user.name" ng:required/> <br/><br/>
   <label>Address:</label><br/>
  <input type="text" name="user.address.line1" size="33" ng:required/> <br/>
  <input type="text" name="user.address.city" size="12" ng:required/>,
  <input type="text" name="user.address.state" size="2" ng:required ng:validate="regexp:state"/>
  <input type="text" name="user.address.zip" size="5" ng:required
ng:validate="regexp:zip"/><br/><br/>
   <label>Phone:</label>
  [ <a href="/contacts/new" ui:pe ng:click="user.contacts.$add()">add</a> ]
  <div ng:repeat="contact in user.contacts">
    <select name="contact.type">
      <option>email</option>
      <option>phone</option>
      <option>pager</option>
      <option>IM</option>
    </select>
    <input type="text" name="contact.value" ng:required/>
     [ <a ui:pe href="/contacts/remove/1" ng:click="user.contacts.$remove(contact)">X</a> ]
  </div>
  <hr/>
  Debug View:
  <pre>user={{user}}</pre>
</div>

CSS

body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }