title: AngularJS - How to trigger submit in a nested form
body: <p>I'm building a form that generates an invitation when submitted.  The invitation has several fields, one of which is an email address input with an 'add' button, which when clicked should add that address to a list of email addresses that should receive the invite.</p>
  
  <p>This can be done with a single form, however if the user hits the enter key while typing an email then it triggers <code>submit</code> on the whole form.  I'd like to have the enter key result - when the email input field is focused - have the same effect as clicking the 'add' button.  I expected that the proper way to solve this would be to nest an email entry form within the invitation form, something like this:</p>
  
  <pre><code>    &lt;ng-form ng-submit="sendInvite()"&gt;
          &lt;input type="text" placeholder="Title" ng-model="invitation.title"/&gt;
  
          &lt;ng-form ng-submit="addInvitee()"&gt;
              &lt;input type="email" placeholder="Title" ng-model="inviteeEmail"/&gt;
              &lt;button class="btn" type="submit"&gt;add&lt;/button&gt;
          &lt;/ng-form&gt;
  
          &lt;button class="btn" type="submit"&gt;Send&lt;/button&gt;
      &lt;/ng-form&gt;
  </code></pre>
  
  <p>With the following javascript in the controller:</p>
  
  <pre><code>    $scope.addInvitee = function() {
          $scope.invitation.emails.push($scope.inviteeEmail);
          $scope.inviteeEmail = '';
      }
  
      $scope.sendInvite = function() {
          //code to send out the invitation
      }
  </code></pre>
  
  <p>My problem is that having nested the forms (and in doing so converted from <code>&lt;form&gt;</code> to <code>&lt;ng-form&gt;</code>, submitting either one no longer works.</p>
  
  <p><a href="http://plnkr.co/edit/q1hfoVajxe0Zr0ChaYOk?p=preview" rel="noreferrer">Plunker here</a></p>