Angularjs: how to keep duplicate instances of the same object in sync - angularjs

Question

Let's say we have the following relations in our database:
A Company, that can have zero to many employees
An Employee is hired by one and only one Company
An Employee can be the manager of zero or many employees
...and the following entities in our database:
Company: Id=1, Name='Contoso'
Employee: Id=1, CompanyId:1, ManagerId= Null, Name='Jack Sparrow', Salary=1000
Employee: Id=2, CompanyId:1, ManagerId= 1, Name='Will Turner', Salary=900
...which will (in my case) result in this JSON representation when converted by NewtonSoft:
{
Id: 1,
Name: 'Contoso',
"Employees": [
{Id:1, CompanyId:1, ManagerId: null, Name: 'Jack Sparrow', Salary:1000},
{Id:2, CompanyId:1, ManagerId: 1, Name: 'Will Turner', Salary:900,
Manager:{Id:1, CompanyId:1, ManagerId: null, Name: 'Jack Sparrow', Salary:1000}
}
]
}
As you can see, there are two instances of the Employee/Manager 'Jack Sparrow'.
When binding one of these instances to the UI, I would like both instances to stay in sync if changes occurs.
Are there any mechanism (or trick) in AngularJS v1 which could help me achieve this?
Please note that this is just a simple data structure to illustrate my problem.
One could argue that the 'Manager'-object should not be fully represented, but in my case it is...

Answer 1

Change your query so that it doesn't return the Manager property. Then just fix up the data when you receive it.
I assume your ManagerId field for Will Turner is supposed to be 1 (it's 2 in the JSON sample) in your example to refer to Jack Sparrow. If so all you need is something like:
angular.forEach(employees, function(emp) {
if(emp.ManagerId !== null) {
emp.Manager = employees[emp.ManagerId]);
}
});
Of course you don't even need to change the query not to return the manager, you can still just run this code when you receive the data and overwrite the redundant manager data.