How to update array in scope of parent controller when modal window is open (Angular UI Bootstrap Modal)?

Question

JavaScript

Good day to all.
I ran into one problem after refactoring the backend code to the Testing System application. The test is a list of multiple-choice questions, with one and only one answer being correct.
After the debug, everything worked fine, but all the logic for managing questions and answers was located in one controller. I moved the response logic to a separate nested controller and the problem started after that. I've tried many different ways, to no avail.
By design, adding and editing questions and answers happens in a modal window ( Angular UI BoostrapModal). The template is located separately and is not repeated when inserting each question and answer. When the form data is not valid, validation errors are shown, otherwise a save success message is shown and all form fields are reset to their initial state. All this happens when the modal window is open, you can close it only by pressing the "Cancel" button, a cross or Esc.
I need to update $scope.questions in QuestionsCtrl from modal window (add button is also inside modal window). After pressing the button once, the data is updated, but no success message or validation errors are shown, and the form fields do not revert to their original state. Repeated clicks no longer call the function, i.e. it is executed only once.
Without a modal window, but with nested controllers, everything works as expected.
There is an option to use promise result, but for it it is necessary to close the modal window, right there the very idea is that the manager can add as many questions and answers as he likes without reopening the window.
Tried also Angular Strap , same result.
An important point - with each request to add / edit in the modal window, the current list of questions and answers is sent in json, after which $scope.questions is completely reassigned. Maybe this is not the best option, but this was done so that managers always work only with up-to-date information (cases of simultaneous editing of one test), as well as for editing in different tabs and browsers by one person (this is already much less likely, but nevertheless , can lead to collisions).
The problematic place was identified - it lies precisely in the update of $scope.questions.
The update occurs by a complete reassignment, if you add new elements simply through push, there are no problems.
Passing through the array that came from the server with comparison and removal / addition of new elements depending on the changes is a bad idea in my opinion.
But even if without reassigning, remove all elements from the array and then sequentially add new ones in a cycle, the problem remains.
More specifically, as soon as the array becomes empty, then this error occurs.
I created Plunk , leaving only the essentials for a better understanding of the problem.
Actually, the question is, how, when the modal window is open, when the "Add" button is pressed, is it correct to update the $scope.questions array in the background?

Answer 1

Use shared data via factory, pass to modal's scope.