<!-- #docregion -->
<div class="container">
  <h1>Hero Form</h1>
  <form>
    <div class="form-group">
      <label for="name">Name</label>
      <!-- #docregion ngControl-2 -->
      <input type="text" class="form-control" required
             [(ngModel)]="model.name"
             ngControl="name" #spy >
      TODO: remove this: {{spy.className}}
      <!-- #enddocregion ngControl-2 -->
    </div>

    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text" class="form-control"
             [(ngModel)]="model.alterEgo"
             ngControl="alterEgo" >
    </div>

    <div class="form-group">
      <label for="power">Hero Power</label>
      <select class="form-control" required
              [(ngModel)]="model.power"
              ngControl="power" >
        <option *ngFor="let p of powers" [value]="p">{{p}}</option>
      </select>
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>
