In my project, I have developed two directives named "mainPane" and "sidePane" displaying lists of items. These lists often contain overlapping content, allowing users to interact with the items in either list. My main requirement is that any changes made to an item in one list should be immediately reflected in the other list.
I am considering storing all items in a central Content service, which will also handle the retrieval logic via AJAX calls. However, I need advice on how to structure this service effectively. Should I maintain two separate lists in the service for each pane? If so, how should I handle items present in both lists?
One approach could be to store all items in a single array and filter them to generate the two distinct lists. The challenge here lies in determining which list an item belongs to, as there is no inherent property defining it. One solution might be to add fields like onMainPane and onSidePane to the objects and use them for filtering. But would this be the most efficient method, and should the filtering be done within the service or the directives themselves?
Alternatively, is there a better way to organize this functionality?