Accessing angular bootstrap modal form from controller

Question

I am trying to access the form from the modal controller (Plunkr) but myForm doesn't seem to be accessible. How to get alert call to work:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl          
    });       
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function() {
    // How to get this?
   alert($scope.myForm.$dirty);
  };

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

And template:

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
          <form name="myForm" novalidate>
          <input type="email" value="hello">
          </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="submit()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

Answer 1

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.

You can try to attach form to parent scope with (Angular 1.2.16):

<form name="$parent.userForm">

The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.

<div ng-class="{'has-error': userForm.email.$invalid}"}>

Answer 2

This was an known bug in ui-bootstrap. So injecting $modalInstance works fine now.

Workaround is to pass form instance to the submit function explicitly:

<form name="myForm" novalidate ng-submit="submit(myForm)">
  <div class="modal-header">
    <h3>I'm a modal!</h3>
  </div>
  <div class="modal-body">
    <input type="email" value="hello">
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="submit">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
  </div>
</form>

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.submit = function(myForm) {
   alert(myForm.$dirty);
  };
};