Within my application, there is an object named eventData which acts as a singleton and is injected into multiple controllers through a resolve function.
This eventData contains various sets of data such as drop down list values along with the main model. In simple terms, its structure looks like this:
eventData.DropDownListValues1
eventData.DropDownListValues2
eventData.MyModel
In each controller, the implementation goes as follows:
angular.module('myWebApp.controllers').
controller('MyCtrl', function ($scope, eventData, coreAPIservice, ViewMatrixService, UtilityService) {
$scope.myModel = eventData.MyModel;
$scope.dropDownListValues1 = eventData.DropDownListValues1;
});
The views are represented like this:
<select class="form-control input-sm"
ng-model="myModel.Item"
ng-options="myItem as myItem.ItemName for myItem in dropDownList1 track by myItem.ItemId">
<option value="" selected disabled hidden>Select Item...</option>
</select>
When the post request to the webservice returns the updated model with new database-generated IDs, attempting to reassign eventData.MyModel does not trigger updates in all referencing controllers.
coreAPIservice.UpdateEvent(eventData.MyModel).success(function (response) {
eventData.MyModel = response;
});
Typically, changes to a specific property within the model trigger immediate updates across all associated controllers/views such as:
$scope.myModel.myProperty1 = "abcdefg";However, replacing the entire MyModel object seems to break references and hence, fails to update the views.
To address this issue, two potential solutions have been considered - either fetching the data again after a post request or updating each property individually.
Re-fetching data feels redundant and slows down the process since the updated model is already available post-request. On the other hand, individually updating over 1000 properties on MyModel is time-consuming and may affect performance negatively.