I am facing a unique challenge: I have a webpage with two tabs that need to utilize ng-view from AngularJS. The twist is that both tabs must share the same variable, similar to referencing a variable in C# using the "ref" keyword.
If you want to see an example of what I mean, please check out the Using object section of this demo: http://plnkr.co/edit/zZfUQN?p=preview
<h3>Using object:</h3>
<div class="example">
<img class="mainImg" ng-src="{{mainImg.url}}" />
<p>This is the parent scope with the main image.</p>
<p>$scope.mainImg.url == {{mainImg.url}}</p>
<div class="thumbs">
<p>Thumbs generated with ng-repeat, with ng-click setting <strong>$scope.mainImg.url</strong> (click on them to see what happens):</p>
<div class="thumbDiv" ng-repeat="img in images">
<img class="thumb" ng-src="{{img}}" ng-click="mainImg.url = img" />
<p>This is a child scope generated by ng-repeat.</p>
<p>$scope.mainImg.url == {{mainImg.url}}</p>
</div>
</div>
</div>
In essence, the main page serves as the container and the tabs act as children. The challenge lies in maintaining a shared variable reference between these children to ensure they all use the same value.
-- EDIT
I neglected to mention a crucial point: the reference variable can be modified by one child, and the updated value must be synchronized across other children. Thank you for your assistance,
Karine