title: Loop through the children of an element in a AngularJS directive
body: <p>I have a problem - I've forgotten how to code! I have an angularJS directive that is on a parent wrapper tag (a DIV) and in my directive I wish to loop through the children (first Child DIVs). I have the following</p>
  
  <pre><code>&lt;div data-check-attributes&gt;
    &lt;div data-ng-repeat="user in Users" data-id="{{ user.ID }}" data-ng-click="doSomething(user.ID)" data-new="{{ user.newUser }}" class=""&gt;
      &lt;div&gt; {{ user.userName }} &lt;/div&gt;
      &lt;div&gt; {{ user.userAge }} &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now in my directive I wish to loop through the first child divs (there could be many of these, but I am seeing 10 users in my loaded view) and perform certain checks and modifications in my directive, using the data attributes, the $location object and potentially many more... however I can't remember how to loop through the first child divs, I seem to get errors with everything I tried... so far I have this, which doesn't work! In the example below I just want to write the data-id of the first child nodes to the console</p>
  
  <pre><code>.directive('checkAttributes', function ($location) {
          return{
              restrict: 'A',
              link: function (scope, element) {
  
              // will use $location later
  
                  console.log(angular.element(element)[0]);  // this outputs the HTML
                  console.log(angular.element(element)[0].children().length); // this errors, TypeError: object is not a function
  
                  for (var i = 0; i &lt; angular.element(element)[0].children.length; i++) {
                      console.log(angular.element(element)[0].children[i].getAttribute('data-id'));
                  }
  
              }
          };
      });
  </code></pre>
  
  <p>I'm confused... please help!</p>