title: how to select first item by default and then highlight the selected item in AngularJs
body: <p>I am working on a app, that displays all items in left side and by default it should highlight the first item and show the item details in rightside view. when user clicks any item in the list it should highlight that item and show the selected item details in right side view.</p>
  
  <p>here is my code (leftside view):</p>
  
  <pre><code>&lt;div ng-repeat="item in itemList()| filter:{status: itemType}"&gt;
      &lt;div  id="itemRow" ng-click="selectedItem(item)" ng-class="{'active':selectedItemid === item.id}"&gt;     
              &lt;div id="itemRowContent"&gt;               
                      &lt;div id="itemName" class="appFont"&gt;&lt;b&gt;{{item.name}}&lt;/b&gt;&lt;/div&gt;
  
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In controller:</p>
  
  <pre><code> $scope.selectedItem= function(item){
          $scope.selectedItem = item;        
          $scope.selectedItemid = item.id;       
     };
  </code></pre>
  
  <p>Right side view:</p>
  
  <pre><code>            &lt;div class="headersInfoRow2"&gt; {{selectedItem.type}}:&lt;/div&gt;
              &lt;div class="headersInfoRow2"&gt; {{selectedItem.price}}&lt;/div&gt;
              &lt;div class="headersInfoRow3"&gt; {{selectedItem.quantity}}&lt;/div&gt; 
   ...
  </code></pre>
  
  <p>...</p>
  
  <p>currently, it is displaying selected item, how to highlight first item and display first item details in right side view by default.then highlight the slected item and display selected item details.</p>