Can't access form values in a $modalInstance

Question

I'm opening a $modalInstance in which user has to choose an option from radio inputs (values loaded dynamically) and return chosen value.

I have this function to open the $modalInstance:

$scope.openAddFriendGroup = function () {
  var addFriendGroupModal = $modal.open({
    templateUrl: "addFriendGroupModal.html",
    controller: ModalAddFriendGroupCtrl,
    resolve: {
      myDetails: function () {
        return $scope.info;
      }
    }
  });
};

Then this is the $modalInstance controller:

var ModalAddFriendGroupCtrl = function ($scope, $modalInstance, myDetails, groupsSvc) {
  $scope.addableFriends = [];
  $scope.chosenFriend = null;

  //here goes a function to retrieve value of $scope.addableFriends upon $modalInstance load

  $scope.addFriend = function () {
    $scope.recording = true;

    groupsSvc.addFriend($scope.chosenFriend, myDetails).then(function (response) {
      if(response.status && response.status == 200) {
        $modalInstance.close($scope.userid);
      }
    }, function (err) {
      $modalInstance.dismiss(err);
    });
  };
};

And this is addFriendGroupModal.html, the HTML for the modal itself:

<div id="add-friend-group-modal">
  <div class="modal-header">
    <h3 class="modal-title">Add friend</h3>
  </div>
  <div class="modal-body">
    <form class="form" role="form" ng-hide="loading">
      <div class="form-group">
        <label class="control-label">Friend:</label>
        <div class="radio" ng-repeat="thisFriend in addableFriends">
          <label>
            <input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}
          </label>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="addFriend()">Add friend</button>
  </div>
</div>

Now, the problem comes when I try to retrieve the value that has been selected in the radio buttons of the form in the modal. I can't seem to retrieve this value in $scope.addFriend. The value of $scope.chosenFriend stays at null and does not get updated when selecting a radio option.

What am I doing wrong?

Answer 1

$modal.open returns promise so try :

 var addFriendGroupModal;

 $modal.open({ ...})
  .result.then(function(response){
      addFriendGroupModal  = response;
   });

Answer 2

<input type="radio" id="friend{{thisFriend.id}}" name="chosenFriend" ng-model="$parent.chosenFriend" ng-value="thisFriend" /> {{thisFriend.name}} {{thisFriend.surname}}

in here your ng-model is $parent.chosenFriend so, why are you expecting $scope.chosenFriend to not be a null? change you ng-model property to $scope.chosenFriend.

Answer 3

Retrieved answer from a related question, by gertas

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.

This is known issue: https://github.com/angular-ui/bootstrap/issues/969

I proposed the quick workaround which works for me, 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}"}>

So, in my form I would have to set a name="$parent.friendForm" attribute to <form>, and then bind the radio button model to it, ng-model="friendForm.chosenFriend" to be able to read it from the modal scope at $scope.friendForm.chosenFriend.