title: AngularJS - Bind click event to children of directive element
body: <p>I'm back to using AngularJS and I've forgotten everything. I have an div in my html view that contains a custom directive and the children DIVs have a <code>ng-repeat</code> directive, this is my HTML:</p>
  
  <pre><code>&lt;div class="row" data-custom-directive&gt;
  &lt;div class="col-xs-2 main-nav-cell" data-ng-repeat="nav in mainNavigation.topNavi" data-url="{{ nav.link }}"&gt;
      &lt;div&gt; {{ nav.name }} &lt;/div&gt;
      &lt;div class="item-counter" data-ng-show="nav.value &gt; 0"&gt; {{ nav.value }} &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now in my custom directive I wait for the <code>ng-repeat</code> to complete then I loop through the children DIVs and perform certain tasks (some I have omitted here).</p>
  
  <pre><code>.directive('customDirective', function ($location, $timeout, $rootScope) {
      'use strict';
      return{
          restrict: 'A',
          link: function (scope, element) {
  
              $timeout(function () {
  
                  var i,
                      list = angular.element(element),
                      cssCheck = function () {
  
  
                          for (i = 0; i &lt; list[0].children.length; i++) {
  
                              /* 
  
                              Here I wish to set a click event on the Child DIV 
                              I have tried list.children()[i].click = fn &amp; list.children()[i].bind('click' fn)
                              but nothing works!
                              */
  
                              // if the class is there remove it...
                              if (list.children()[i].classList.contains('is-active')) {
                                  list.children()[i].classList.remove('is-active');
                              }
  
  
                              // if there is a match add the class...
                              if ($location.url().indexOf(list[0].children[i].getAttribute('data-url')) &gt; 0) {
                                  console.log('match');
                                  list.children()[i].classList.add('is-active');
                              }
  
                          }
  
                      };
  
                  $rootScope.$on('$routeChangeSuccess', function () {
                      cssCheck();
                  });
  
                  // original kickoff
                  cssCheck();
              });
          }
      };
  </code></pre>
  
  <p>I want to assign a click event to the first child div (where I check the CSS) and perform certain tasks depending on the 'data-url' I don't really want to add a <code>ng-click</code> directive to the child in my HTML. Can someone please advise me on how to add a click event to the child div?</p>
  
  <p>Many thanks</p>