javascript - ng-repeat detect first occurrence of a condition -

for codes below, want detect first occurrence of condition (msg.from_id==myid && msg.seen==1) , ignore rest items condition satisfies.

i tried ($first && msg.from_id==myid && msg.seen==1) condition may not applicable in first index.

<table class="table table-striped table-hover">     <tr ng-repeat="msg in messages"  >         <td ng-class="{'orange': msg.from_id!=myid}" >              <span class="seen" ng-show="msg.from_id==myid && msg.seen==1">                    <i class="icon icon-ok border0 font12 green"></i> seen             </span>               <b>{{msg.username}}</span> :</b>             <span  ng-bind-html-unsafe="msg.message"></span>         </td>     </tr> </table> 

actually want achieve here show "seen" span first occurring seen message (just in viber).

edit: fault, changed answer:

i created example provide possible solution; changed ngshow condition ngif , added new condition !isdone. once first element rendered, nginit assign isdone true preventing further spans rendered

var app = angular.module("app", []);  app.controller("ctrl", function ($scope) {      $scope.messages = [{          from_id: 'test',          seen: 1,          username: 'username',          message: 'message1'      }, {          from_id: 'test',          seen: 0,          username: 'username2',          message: 'message2'      }, {          from_id: 'test2',          seen: 1,          username: 'username3',          message: 'message3'      }, {          from_id: 'test2',          seen: 1,          username: 'username3',          message: 'message3'      }        ];      $scope.myid = "test";  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <table ng-app="app" ng-controller="ctrl" class="table table-striped table-hover">      <tr ng-repeat="msg in messages">          <td ng-class="{'orange': msg.from_id!=myid}"> <span class="seen" ng-if="msg.from_id==myid && msg.seen==1 && !isdone">                     <i ng-init="isdone=true" class="icon icon-ok border0 font12 green"></i> seen              </span>  <b>{{msg.username}} :</b>   <span ng-bind="msg.message"></span>            </td>      </tr>  </table>