Focus on a particular row after using ng-repeat
<p>I have a requirement where I have to focus to a particular row when the items are displayed using ng-repeat.<br>
Let us say that I have a list of 100 items with each item having field, <code>itemId</code> ranging from 1 to 100, <code>itemName</code> and <code>isAvailable</code>. This list is fetched from the server using an ajax call from the angularjs service that I wrote. The controller in turn uses this service to make the ajax call. When the response is retrieved, I am displaying this list on the UI using ng-repeat. Eveything is fine so far, but I want to automatically focus to an item which has an <code>itemId</code> value of lets say 50 when the page is loaded. I want to to this from the controller side.<br>
Below is the code that I currently have.  </p>

<p><strong>HTML</strong>  </p>

<pre><code>&lt;div id="eventTypes" class="panel-body"&gt;
    &lt;div ng-repeat="item in items" class="panel-body"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-9"&gt;{{item.itemId)}}&lt;/div&gt;
            &lt;div class="col-md-9"&gt;{{item.itemName)}}&lt;/div&gt;
            &lt;div class="col-md-9"&gt;{{item.isAvailable)}}&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;  
</code></pre>

<p><strong>JS</strong>  </p>

<pre><code>(function () {
    'use strict';
    angular.module('myApp').controller('itemsController', function ($scope, itemsService) {

        var serviceError = function (errorMsg) {
            console.log(errorMsg);
        };

        $scope.items = [];

        $scope.loaditems = function () {
            itemsService.getitems().then(function (response) {
                $scope.items = response.data;
            }, serviceError);
        };

        $scope.loaditems();
    });
}());  
</code></pre>

<p>The above code works fine. It is displaying the items on the UI. But, I want to automatically focus (scroll) to the item number 50 when the page is loaded.</p>