How to create connected modal forms with angularjs? - angularjs

Question

I want have a table showing a list of students. When a user clicks on a one of these students, a modal form pops up showing the details of the student (this works fine). I expose the selected student to the modal control using resolve like below:
function showStudentDetails(){
var modalInstance = $uibModal.open({
templateUrl: 'tpl/student/app_student.view.html',
controller: function($scope, $uibModalInstance, selectedStudent){
$scope.selectedStudent = selectedStudent;
$scope.userClickedCancel = function(){
$uibModalInstance.dismiss('cancel');
}
$scope.userClickedEdit = function(){
$uibModalInstance.close(selectedStudent);
modalInstance.result.then(function(selectedStudent){
showStudentEdit(selectedStudent);
})
}
},
resolve: {
selectedStudent: function() {
return $scope.selectedStudent;
}
}
});
}
Now, in this modal form there's an edit button which open a second modal.The second modal opens up fine and this is done by the
$scope.userClickedEdit = function(){
$uibModalInstance.close(selectedStudent);
modalInstance.result.then(function(selectedStudent){
showStudentEdit(selectedStudent);
})
}
in the first code snippet. The problem is the selectedStudent is not available in the context of my second modal form so the edit form input controls are blank. Below is my second modal form.
function showStudentEdit(selectedStudent){
var modalInstance = $uibModal.open({
templateUrl: 'tpl/student/app_student.edit.html',
controller: function($scope, $uibModalInstance, selectedStudent){
$scope.selectedStudent = selectedStudent;
$scope.userClickedCancel = function(){
$uibModalInstance.dismiss('cancel');
}
},
resolve: {
selectedStudent: function(){
return selectedStudent;
}
}
});
}
Thanks for taking time to check this and appreciate any help.