html - CSS for first-child is not getting applied -

i need increase height of 1st panel in ng-repeat

code

<div class="panel panel-default panel-height" ng-repeat="candidateinfo in acandidatedetails"> <div class="panel-heading">     <div class="row">         <div class="col-xs-1">             <a style="cursor:pointer">                 {{candidateinfo.name}}             </a>         </div>     </div>     <div stop-watch time="xyz" name="candidateinfo.name" time-of-interview="candidateinfo.doi" ></div> </div> 

here have applied css class .panel-height below

.panel-height:first-child {     height: 500px; } 

here css not getting applied , cannot figure out im going wrong . appreciated.

add class 'panel-heading' when div satisfies $first , add height class name 'firstchild'.

<div class="panel panel-default panel-height" ng-repeat="candidateinfo in acandidatedetails">  <div class="panel-heading" ng-class="{'firstchild':$first}"> <!-- try line -->      <div class="row">          <div class="col-xs-1">              <a style="cursor:pointer">                  {{candidateinfo.name}}              </a>          </div>      </div>      <div stop-watch time="xyz" name="candidateinfo.name" time-of-interview="candidateinfo.doi" ></div>  </div>