Directive in collection-repeat doesn't render properly after scrolling away then back again

In this video, look at the top few rows of icons – they represent a state property passed to a directive. I can confirm that state property is changing properly but the template, which uses ng-class to update the colours is out of sync from the scope data. I’ve tried with ng-class and also not with ng-class and with element.addClass/removeClass with the same side effects.

Before scrolling the icons are rendering correctly as per their state. When I scroll the top rows out of view, then back into view, they no longer appear as they did before (but should). What is going on here? Is there anything I can do to overcome this?