title: AngularJS modal dialog form object is undefined in controller
body: <p>We have a page that opens a modal dialog with a form like below. However when we hit the controller that should handle the form action, the form object is undefined and I am too much of an Angular newbie to understand why...</p>
  
  <p>This is the parent page controller holds the function to open the modal dialog:</p>
  
  <pre><code>app.controller('organisationStructureController', ['$scope', ..., '$modal', function ($scope, ..., $modal) {
  
      $scope.openInvitationDialog = function (targetOrganisationId) {
        $modal.open({
            templateUrl: 'send-invitation.html',
            controller: 'sendInvitationController',
            resolve: {$targetOrganisationId: function () {
              return targetOrganisationId;
            }
            }
          }
        );
      };
  </code></pre>
  
  <p>on a page like this:</p>
  
  <pre><code>// inside a loop over organisations
  &lt;a ng-click="openInvitationDialog({{organisation.id}})"&gt;Invite new member&lt;/a&gt;
  </code></pre>
  
  <p>the invitation-dialog html looks like this:</p>
  
  <pre><code>    &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;!-- ... --&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form name="invitationForm"&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;label for="email" style="color:white;"&gt;Email&lt;/label&gt;
                          &lt;input type="email" class="form-control"  autocomplete="off" placeholder="New member email" id="email" name="email" ng-model="invitation.email" required="true"/&gt;
                          &lt;span class="error animated fadeIn" ng-show="invitationForm.email.$dirty &amp;&amp; invitationForm.email.$error.required"&gt;Please enter an email address!&lt;/span&gt;
                          &lt;span class="error animated fadeIn" ng-show="invitationForm.email.$error.email"&gt;Invalid email&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;!-- ... --&gt;
  
                      &lt;div class="modal-footer"&gt;
                          &lt;button type="button" class="btn btn-default" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
                          &lt;button type="submit" class="btn btn-primary" ng-click="sendInvitation()"&gt;Invite&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The controller that should handle the invitation is somewhere else:</p>
  
  <pre><code>  app.controller('sendInvitationController', ['$targetOrganisationId', '$scope', ...,
      function ($targetOrganisationId, $scope, ...) {
  
      $scope.invitation = {
        // ...
        targetOrganisation: {
          id: $targetOrganisationId
        }
      };
  
      $scope.sendInvitation = function () {
  
        // $scope.invitationForm is undefined
        if ($scope.invitationForm.$invalid) {
          return false;
        }
  
        // send the invitation...
  
      };
    }]);
  </code></pre>
  
  <p>So what's the correct way to get the form scope into the controller? </p>
  
  <p>Maybe I need to inject <code>$modal</code> into the <code>sendInvitationController</code> and add the <code>sendInvitation</code> function to it? But when I do that the action never enters the controller. Or do I have to add the function that handles the submit action to <code>$modal.open({ ...</code> instead of referencing the controller? Though I'd much prefer to have the sendInvitationController in its own file and scope.</p>
  
  <p>Thanks for any help!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>We found several things that helped us build a workaround and might help someone answer the question itself:</p>
  
  <ol>
  <li>the <code>$scope.invitation</code> object is not undefined in the <code>sendInvitationController</code> but holds the correct data, while <code>$scope.invitationForm</code> remains undefined.</li>
  <li>inside the send-invitation.html we can access <code>$scope.invitationForm.$invalid</code> and do the validation right there: <code>&lt;button type="button" ng-click="sendInvitation()" ng-disabled="invitationForm.$invalid"&gt;Invite&lt;/button&gt;</code></li>
  </ol>
  
  <p>So the question is: why does the binding of the <code>invitationForm</code> object to the <code>$scope</code> fail on submit while the form model binds correcetly?</p>