AngularJS: force ng-repeat update when element property changes

Question

I struggle with the angular watch manners. I have the following markup:

<map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()"> <marker ng-repeat="pin in pins() track by pin.iconKey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()" icon="{{pin.icon()}}"></marker> </map> 

Each individual output returned by pins () has a number of properties, sub-properties, etc. One of these sub-properties controls the color of the marker. When this subtask changes, I want the user interface updated.

Since ng-repeat appears in $ watch based on simple changes to the collection, it is not clear how to achieve this. I thought my tracking function, iconKey (), would do this because it would return a different value depending on the subproperty value. But that did not work.

One more thing: the subprocess changes in the callback from the $ interval, which works under the directive. I mention this because in an earlier post, someone thought there might be a context / area issue.

However, even when I make changes to the event listener in the user interface controller (where the event occurs in the $ success callback success sentence), it still doesn't work.

That's why I think the problem is just angular without noticing the change in iconKey (); it acts like all this $ watch for ng-repeat is the length of the array. Which does not change when the subtask changes.

Update

I created a plunker to demonstrate the problem I am facing. You can find it at http://plnkr.co/edit/50idft4qaxqw1CduYkOd

This is an abridged version of the application that I create, but it contains basic elements (for example, a data context service for storing information about card outputs and the $ interval service for switching the subtask of one of the contacts to the array elements).

You start the update cycle by clicking the "Start" button in the menu bar (you may need to slightly drag the map to place both outputs in full view). It should switch the color of each pin, alternately, 5 times each time every 2 seconds. It does this by switching the value of the isDirty property of the pin object to the listener defined in the controller. The event is raised by the $ interval service.

If you go to line 22 during the test cycle, you will see that the pin icon returns. So something inside angular is causing the information ... but the color of the pin does not change.

I look forward to someone quickly pointing out a mistake that has nothing to do with any of my theories :). I apologize in advance for any blind that I wear.

Update 2

After checking the code snippet in the answer, I simplified my plnkr and demonstrated that angular actually updates the user interface when the subtask changes. Thus, it looks like a restriction or error in the ng card.

Answer 1

What you are missing here is the concept of an array and the function that your pins () functions pass an array, and this array is associated with ng-repeat. But the brutal fact is that regardless of the fact that this array never changes, because you do not have ANY reference to this array, therefore, rg-repeat will always remain the same as ...

I will try to get an array, which will show two ways to do this.

 ng-init="pinsArray = pins()" 

and second internal controller

 $scope.pinsArray = $scope.pins() 

then make changes to $ scope.pinsArray inside the controller

ng-repeat will be changed to

 ng-repeat="pin in pinsArray" 

we also read about filters, I assume that what you are trying to do with "track by"

hope this helps.

Edit: different story with ngMap brands

it doesn't look like it is a sub-property. so work around

add the following statement to update pinsArray after making changes to its properties.

 pinsArray = angular.copy(pinsArray); 

permitted plnkr example: http://plnkr.co/edit/EnW1RjE9v47nDpynAZLK?p=preview