title: JQuery delegate 'on' click does not work on newly added content with angular
body: <p>Basic HTML page with an angular app that loops through my controller scope's array and with the help of ng-repeat prints the array content as navigation. </p>
  
  <pre><code>        &lt;div ng-app="FilterApp"&gt;
          &lt;div class="regionMenu" ng-controller="myRegionCtrl"&gt;
          &lt;a href="#" data-target="#regionItems" data-toggle="collapse" style="color:black;"&gt;&lt;i class="fa fa-list mt"&gt;&lt;/i&gt;&lt;span class="collapse in hidden-xs"&gt;{{ selected.name }}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;ul class="nav nav-stacked collapse" id="regionItems"&gt;
                  &lt;li ng-click="setNewRegion(region)" ng-repeat="region in regions"&gt;
                      &lt;a href="" title="{{ region.id }}"&gt;{{ region.name }}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The problem arises when I try to add to each <strong><em>li a</em></strong> a jquery on click listener function&lt; I tried possibly every combination I could think off to make it work, example: <strong><em>.regionMenu li a</em></strong>, etc but to no avail. </p>
  
  <pre><code>$(document).on("click", "li a", function(e) {
      var id = $(this).attr("title");
      e.preventDefault();
      console.log("MyApp working..." + id);
  });
  </code></pre>
  
  <p>But the above code does print when it's the case of <strong><em>li a</em></strong>, but li a is too broad. I don't want every list anchor element on my page to work the same way. thanks~!</p>