title: get html elements in angularJS
body: <p>I am new in AngularJS world. I have a circumstance here.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;body ng-app="myApp"&gt;
  
  &lt;table ng-controller="myCtrl" border="1"&gt;
  &lt;tr class="x" ng-repeat="x in records"&gt;
    &lt;td&gt;{{x.Name}}&lt;/td&gt;
    &lt;td&gt;{{x.Country}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.records = [
      {
        "Name" : "Alfreds Futterkiste",
        "Country" : "Germany"
      },
      {
        "Name" : "Berglunds snabbköp",
        "Country" : "Sweden"
      },
      {
        "Name" : "Centro comercial Moctezuma",
        "Country" : "Mexico"
      },
      {
        "Name" : "Ernst Handel",
        "Country" : "Austria"
      }
    ];
    var arrays = document.getElementsByClassName("x");
    console.log(arrays.length);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I tried to get the array of html elements I did load by angularJS (using ng-repeat). When I logged the value of whole array, its results are correct. However when I logged the array.length or array[1], the results were 0 and undefined respectively. I tried to put these code in $scope.on('viewContentLoaded') to ensure that all html elements finished loading, but the results were the same. So what is my stupidity here?</p>
  
  <p>Thank you.</p>
  
  <p>**** Solution:</p>
  
  <pre><code> $timeout(function(){
   var arrays = document.getElementsByClassName("x");
   console.log(arrays.length);
   });
  </code></pre>
  
  <p>Thanks to @Vladimir M</p>