title: Clicking on element not hit angularjs directive link function
body: <p>It seems my li elements in angularjs directive not responding clicking event.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;my-selbg&gt;
                              &lt;ul&gt;
                                  &lt;li ng-repeat="bgimage in bgimages"&gt;&lt;img src={{bgimage}} width="85" height="82" dir={{bgimage}}&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/my-selbg&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var mlwcApp = angular.module('mlwcApp', [])
  .controller('BgImagesListController', function($scope, $http) {
  
      $http.get("http://localhost:8080/webcontent/bg_images").success(function(response) {
          $scope.bgimages = response;
      });
  })
  .directive('myselbg', function(){
      return {
          restrict: 'E',
          scope: true,
          link: function(scope, element, attrs){
              var elementOne = angular.element(element.children[1]);
              var elementTwo = angular.element(element.children[2]);
              var elementThree = angular.element(element.children[3]);
  
              setUpBGImg = function(){
                  console.log('link function');
              };
              $(elementOne).on('click', setUpBGImg);
              $(elementTwo).on('click', setUpBGImg);
              $(elementThree).on('click', setUpBGImg);
          }
      };
  });
  </code></pre>
  
  <p>I have 3 li elements and clicking any of them dose not hit the code in link function. Anyone has idea?</p>