When launching a $modalInstance, the user will need to select an option from dynamically loaded radio inputs and return the chosen value.
To open the $modalInstance, this function is used:
$scope.openAddFriendGroup = function () {
var addFriendGroupModal = $modal.open({
templateUrl: "addFriendGroupModal.html",
controller: ModalAddFriendGroupCtrl,
resolve: {
myDetails: function () {
return $scope.info;
}
}
});
};
The controller for the $modalInstance is as follows:
var ModalAddFriendGroupCtrl = function ($scope, $modalInstance, myDetails, groupsSvc) {
$scope.addableFriends = [];
$scope.chosenFriend = null;
// Function to retrieve the value of $scope.addableFriends when the $modalInstance loads
$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);
});
};
};
This is the HTML code for the modal itself in addFriendGroupModal.html:
<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>
The issue arises when attempting to retrieve the selected value from the radio buttons in the form within the modal. The value of $scope.chosenFriend remains null and does not update when an option is selected.
Can you spot what I might be doing wrong?