title: How to make only first element visible in ng-repeat after it loads into DOM
body: <p>I am working ng-repeat in angular js and i am not getting exact solution for below :</p>
  
  <pre><code>&lt;div class="some"&gt;
      &lt;ul style="list-style:none"&gt;
          &lt;li ng-repeat="loopMe in data"&gt;&lt;span id="step{{$index+1}}" style="display:none"&gt;{{loopMe}}&lt;/span&gt;&lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;
  
  **AJAX Call**
  $http({
  method: 'GET',
  url: 'data.json',
  }).success(function (data,status) {
      $scope.data = data
      document.getElementById("step1").style.display = 'block';
  
  }
  </code></pre>
  
  <p>I want to make first element to get displayed just after the data is received.
  But the problem is as data is received ng-repeat did not finishes and </p>
  
  <p><code>document.getElementById("step1").style.display = 'block';</code> gives <strong>error</strong> that <b>Cannot read property 'style' of null</b></p>
  
  <p>But when i give timeout like</p>
  
  <pre><code> $timeout(function () { 
      document.getElementById("step1").style.display = 'block';
   }, 1000);
  </code></pre>
  
  <p>It worked, but i need other way around which can work just after the ng-repeat  loads all the li into the DOM.</p>
  
  <p>P.S - I am using angular 1.5</p>
  
  <p>Any help will be highly appreciated !! </p>