When trying to set a property in a service equal to data returned from a network call, the conventional method goes like this:
//SERVICE//
thisService.property = data;
//SERVICE//
The corresponding controller code usually looks something like this:
//CONTROLLER//
this.property = ThisService.property;
//CONTROLLER//
With the intention of binding it in the HTML for dynamic updates:
//VIEW//
{{property}}
//VIEW//
Unfortunately, this setup does not function as expected. The reason being that the line:
thisService.property = data;
creates a new reference for 'thisService.property', thus rendering the controller's reference undefined.
To address this issue, one possible workaround is to encase the data within another object:
//SERVICE//
thisService.property = {};
thisService.property.property = data;
//SERVICE//
//CONTROLLER//
this.property = ThisService.property;
//CONTROLLER
//VIEW//
{{property.property}}
//VIEW//
This solution may seem cumbersome and inelegant. Are there any cleaner and more efficient alternatives available?