<div class="screen_background">
    <div class="cards">
        <div ng-repeat="agent in screen.agents" class="card agent-card">
            <div class="agent-status-color agent-status-color-{{agent.color}}"></div>
            <div class="agent-status-info">
                <div class="agent-name">
                    {{ screen.trimName(agent.name) }}
                </div>
                <div ng-if="agent.status !== 'Vapaa'" class="agent-status-container">
                    <div class="agent-status">{{ agent.status }}</div>
                    <oc-time seconds="agent.time_in_status" class="status-timer"></oc-time>
                </div>
            </div>
        </div>
    </div>
    <div class="sidebar">
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-green"></div>
            <div class="green-count"> {{screen.green}}</div>
        </div>
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-yellow"></div>
            <div class="yellow-count"> {{screen.yellow}} </div>
        </div>
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-red"></div>
            <div class="red-count"> {{screen.red}} </div>
        </div>
        <div class="agent-status-count"><a ui-sref="filterpanel">rajaa</a></div>
    </div>
</div>

<div class="screen_background">
    <div class="cards">
        <div ng-repeat="agent in screen.agents track by agent.agent_id" class="card agent-card">
            <div class="agent-status-color agent-status-color-{{agent.color}}"></div>
            <div class="agent-status-info">
                <div class="agent-name">
                    {{ screen.trimName(agent.name) }}
                </div>
                <div ng-if="agent.status !== 'Vapaa'" class="agent-status-container">
                    <div class="agent-status">{{ agent.status }}</div>
                    <oc-time seconds="agent.time_in_status" class="status-timer"></oc-time>
                </div>
            </div>
        </div>
    </div>
    <div class="sidebar">
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-green"></div>
            <div class="green-count"> {{screen.green}}</div>
        </div>
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-yellow"></div>
            <div class="yellow-count"> {{screen.yellow}} </div>
        </div>
        <div class="agent-status-count">
            <div class="agent-status-color agent-status-color-red"></div>
            <div class="red-count"> {{screen.red}} </div>
        </div>
        <div class="agent-status-count"><a ui-sref="filterpanel">rajaa</a></div>
    </div>
</div>

Optimize screen updates with ngRepeat tracking by agent id
Optimize screen updates with ngRepeat tracking by agent id
