Событие щелчка селектора jquery не запускается с угловым

Есть несколько вопросов по этой теме, но этот вариант использования отличается. Я прочитал ответы на все вопросы, связанные с добавлением элемента DOM динамически, поэтому мне нужно использовать делегирование событий. Но здесь это не предел. Я добавляю прослушиватель событий нажатия на элемент DOM, который не добавляется динамически.

Ниже приведена страница html.

<div class="min-content">
    <div class="min-width">

        <div class="crumbs">
            <a href="javascript:;" class="home-link green-link"><span>Home</span></a>
            <span class="icon-arrow"></span>
            <span class="current">Challenges</span>
        </div>
        <!-- end .crumbs --> 

        <div class="tabs-filter">
            <ul>
                <li class="current"><a href="javascript:;">ALL CHALLENGES</a></li>
                <li><a href="challenges-my.html">MY CHALLENGES</a></li>
            </ul>
            <div class="filter-items">
                <div class="icon-btns">
                    <a href="javascript:;" class="icon-list icon-active" data-icon-list></a>
                    <a href="javascript:;" class="icon-grid" data-icon-grid></a>
                    <a href="javascript:;" class="filter-btn green-btn" data-filter-button>Filter</a>
                </div>
                <div class="filter-content hide">
                    <h2 class="titles-box">
                        <strong class="texts">FILTER</strong>
                        <a href="javascript:;" class="icon-close-btn"></a>
                    </h2>
                    <!-- end .titles-box -->
                    <div class="filter-forms">
                        <ul>
                            <li>
                                <strong class="titles">Challenges Name</strong>
                                <span class="input-box">
                                    <input name="" type="text">
                                </span>                 </li>
                            <li>
                                <strong class="titles">Tags</strong>
                                <span class="input-box">
                                    <input name="" type="text">
                                </span>
                                <span class="texts-ex">ex: design, mobile, desktop, etc</span>
                            </li>
                            <li class="select-section">
                                <strong class="titles">Challenge Type</strong>
                                <div class="dropdown-select">  
                                    <a href="javascript:;" id="select-challenge-type" class="select-toggle">&nbsp;<i></i></a> 
                                    <div class="select-menu hide">
                                        <div class="scroll-page">
                                            <ul>  
                                                <li><a href="javascript:;" class="active">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li> 
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li> 
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li> 
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li> 
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                                <li><a href="javascript:;">Lorem Ipsum</a></li>  
                                            </ul> 
                                        </div> 
                                    </div>
                                </div> 
                                <!-- end .dropdown-select -->
                            </li>
                            <li>
                                <strong class="titles">Prices</strong>
                                <div class="slider-box"> 
                                    <div id="slider-range" data-slider-range></div>
                                    <p>
                                        <input type="text" id="amountMin" class="pull-left" readonly>
                                        <input type="text" id="amountMax" class="pull-right" readonly>
                                        <span class="clearfix"></span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="btn-box">
                            <a href="javascript:;" class="reset-btn gray-btn" data-reset-button>RESET</a>
                            <a href="javascript:;" class="apply-filter-btn green-btn">APPLY FILTER</a>
                        </div>          
                    </div>
                    <!-- end .filter-forms -->  
                </div>
                <!-- end .filter-content --> 
            </div>
        </div>
        <!-- end .tabs-filter --> 

        <div class="tabs-content">
            <div class="filter-lists-content hide">
                <h2 class="titles-box">
                    <strong class="texts">FILTER LISTS</strong>
                    <a href="javascript:;" class="icon-close-btn icon-filter-lists-close-btn"></a>
                </h2>
                <!-- end .titles-box -->
                <ul>
                    <li>
                        <a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
                        <span><strong>Challenges Name : </strong>&nbsp;&nbsp;Lorem Ipsum Dolor</span>
                    </li>
                    <li>
                        <a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
                        <span><strong>Tags :</strong>&nbsp;&nbsp;Tag1, Tag2, Tag3</span>
                    </li>
                    <li>
                        <a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
                        <span><strong>Challenges Type : </strong>&nbsp;&nbsp;Lorem Ipsum Dolor</span>
                    </li>
                    <li>
                        <a href="javascript:;" class="icon-close-btn icon-filter-close-btn pull-right"></a>
                        <span><strong>Prices :</strong>&nbsp;&nbsp;$50 - $2000</span>
                    </li>  
                </ul>
                <span class="clearfix"></span>
            </div>
            <!-- end .filter-lists-content --> 

            <div class="list-content">
                <div class="row" data-ng-class-even="'blue-border'" data-ng-repeat="challenge in challenges">
                    <div class="min-box">
                        <div class="col-md-8">
                            <span class="texts"><a href="javascript:;" class="green-link">CHALLENGES #{{challenge.id}} {{challenge.title}}</a></span>
                            <span class="texts">
                                <span class="pull-left"><strong>Type : </strong>{{challenge.challengeType.name}}</span>
                                <span class="pull-right">Created on {{challenge.createdDate | date: 'longDate'}}</span>
                            </span>
                        </div>
                        <div class="col-md-2">
                            <span class="texts">{{challenge.registrationCount}} <strong>Registants</strong></span>
                            <span class="texts">{{challenge.submissionCount}} <strong>Submissions</strong></span>
                        </div>
                        <div class="col-md-2">
                            <span class="texts spacing"><strong class="icon-golden-trophy">$ {{challenge.awardAmount}}</strong></span>
                            <span class="texts"><strong class="icon-blue-funnel"></strong></span>
                        </div>
                    </div>
                    <div class="btn-box">
                        <span class="pull-right">
                            <a href="javascript:;" data-ng-click="submitSolution(challenge)" data-ng-if="challenge.registered" class="green-btn">SUBMIT SOLUTION</a>
                            <a href="javascript:;" data-ng-click="register(challenge)" data-ng-if="!challenge.registered" class="green-btn">REGISTER</a>
                            <a href="javascript:;" data-ng-click="details(challenge)" class="green-btn">DETAILS</a>
                            <a href="javascript:;" data-ng-click="viewSubmissions(challenge)" data-ng-if="challenge.registered && challenge.canViewSubmissions" class="green-btn">VIEW SOLUTIONS</a>
                        </span>
                    </div>
                </div>
                <!-- end .row --> 
                <div class="page-bar">
                    <div class="pull-left">
                        <span class="texts">View&nbsp; :</span>
                        <div class="dropdown-select">
                          <a href="javascript:;" class="select-toggle">6<i></i></a>
                              <div class="select-menu hide">
                                <div class="scroll-page">
                                  <ul>
                                    <li><a href="javascript:;">12</a></li>
                                    <li><a href="javascript:;">18</a></li>
                                    <li><a href="javascript:;">30</a></li>
                                    <li><a href="javascript:;">All</a></li>
                                  </ul> 
                              </div> 
                            </div>
                        </div> 
                        <!-- end .dropdown-select -->
                    </div>
                    <div class="pull-right">
                        <span class="texts resultText">Page :</span>
                        <div class="ratingPagination"> 
                            <a href="javascript:;" class="prev-btn-disable">Prev</a>
                            <span class="pages">
                                <a href="javascript:;" class="active">1</a>
                                <a href="javascript:;">2</a>
                                <a href="javascript:;">3</a>
                                <a href="javascript:;">4</a>
                                <a href="javascript:;">5</a>
                            </span>
                            <a href="javascript:;" class="next-btn">Next</a>
                        </div>   
                    </div>   
                </div>
                <div class="clearfix"></div>
                <!-- end .page-bar -->
            </div>
            <!-- end .list-content -->

            <div class="grid-content hide">
                <div class="row">
                    <div class="col-md-4" data-ng-repeat="challenge in challenges">
                        <div class="boxs">
                            <div class="min-box">
                                <span class="texts"><a href="challenge-details-private-1.html" class="green-link">CHALLENGES #{{challenge.id}} {{challenge.title}}</a></span>
                                <span class="texts">
                                    <span class="pull-left"><strong>Type : </strong>{{challenge.challengeType.name}}</span>
                                    <span class="pull-right">{{challenge.createdDate | date: 'longDate'}}</span>
                                </span>
                                <span class="texts">
                                    <span class="pull-left">{{challenge.registrationCount}} <strong>Registrans</strong></span>
                                    <span class="pull-right">{{challenge.submissionCount}} <strong>Submissions</strong></span>
                                </span>
                                <span class="texts icon-funnel-box">
                                    <span class="texts pull-left"><strong class="icon-blue-funnel"></strong></span>
                                    <span class="texts pull-right"><strong class="icon-golden-trophy">$ {{challenge.awardAmount}}</strong></span>
                                </span>
                            </div>
                            <div class="btn-box">
                                <a href="javascript:;" data-ng-click="submitSolution(challenge)" data-ng-if="challenge.registered" class="green-btn">SUBMIT</a>
                                <a href="javascript:;" data-ng-click="details(challenge)" class="green-btn">DETAILS</a>
                                <a href="javascript:;" data-ng-click="viewSubmissions(challenge)" data-ng-if="challenge.registered && challenge.canViewSubmissions" class="green-btn">VIEW</a>
                                <a href="javascript:;" data-ng-click="register(challenge)" data-ng-if="!challenge.registered" class="green-btn">REGISTER</a>
                            </div>
                        </div>
                    </div>
                    <!-- end .col-md-4 --> 
                </div>
                <!-- end .row -->
                <div class="page-bar">
                    <div class="pull-left">
                        <span class="texts">View&nbsp; :</span>
                        <div class="dropdown-select">  
                            <a href="javascript:;" class="select-toggle">6<i></i></a> 
                            <div class="select-menu hide">
                                <div class="scroll-page">
                                    <ul>
                                        <li><a href="javascript:;">12</a></li>
                                        <li><a href="javascript:;">18</a></li>
                                        <li><a href="javascript:;">30</a></li>
                                        <li><a href="javascript:;">All</a></li>
                                    </ul> 
                                </div> 
                            </div>
                        </div> 
                        <!-- end .dropdown-select -->
                    </div>     
                    <div class="pull-right">
                        <span class="texts resultText">Page :</span>
                        <div class="ratingPagination"> 
                            <a href="javascript:;" class="prev-btn-disable">Prev</a>
                            <span class="pages">
                                <a href="javascript:;" class="active">1</a>
                                <a href="javascript:;">2</a>
                                <a href="javascript:;">3</a>
                                <a href="javascript:;">4</a>
                                <a href="javascript:;">5</a>
                            </span>
                            <a href="javascript:;" class="next-btn">Next</a>
                        </div>   
                    </div>   
                </div>
                <div class="clearfix"></div>
                <!-- end .page-bar -->
            </div>
            <!-- end .grid-content -->
        </div>
        <!-- end .tabs-content --> 

    </div>
</div>
<!-- end .min-content -->  

Ниже приведен сценарий jquery

// JavaScript Document
$(document).ready(function () {
  // #slider-range
  $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 100,
      values: [ 0, 100 ],
      slide: function( event, ui ) {
          $( "#amountMin" ).val( "$ " + ui.values[ 0 ]+"K");
          $( "#amountMax" ).val( "$ " + ui.values[ 1 ]+"K");
      }
  });
    $( "#amountMin" ).val( "$ " + $( "#slider-range" ).slider( "values", 0 )+"K");
    $( "#amountMax" ).val( "$ " + $( "#slider-range" ).slider( "values", 1 )+"K");


  // click on Filter button
  $(".filter-btn").click(function(){
    $(".filter-content").toggleClass("hide");

    $(".filter-content").height($(".tabs-content").height()+15+2);
  });

  // click on close button in Filter popup
  $(".filter-content .icon-close-btn").click(function(){
    $(".filter-content").addClass("hide");
  });

  // click on List icons
  $(".icon-list").click(function(){
    $(".icon-list").addClass("icon-active");
    $(".icon-grid").removeClass("icon-active");

    $(".list-content").removeClass("hide");
    $(".grid-content").addClass("hide");

    $(".filter-content").addClass("hide");
  });

  // click on Grid icons
  $(".icon-grid").click(function(){
    $(".icon-list").removeClass("icon-active");
    $(".icon-grid").addClass("icon-active");

    $(".list-content").addClass("hide");
    $(".grid-content").removeClass("hide");

    $(".filter-content").addClass("hide");
  });

  // click Reset button in Filter popup
  $(".reset-btn").click(function(){
    $(".filter-content .input-box input").val("");

    $("#select-challenge-type").html("&nbsp;<i></i>");

    $( "#slider-range" ).slider({
        values: [ 0, 100 ]
    });

    $( "#amountMin" ).val( "$ 0K");
      $( "#amountMax" ).val( "$ 100K");
  });

  // click Apply Filter button in Filter popup
  $(".apply-filter-btn").click(function(){
    $(".filter-content").addClass("hide");

    $(".filter-lists-content").removeClass("hide");
    $(".filter-lists-content ul li").removeClass("hide");
  });

  // click Close button of Filter lists
  $(".filter-lists-content .icon-filter-lists-close-btn").click(function(){
    $(".filter-lists-content").addClass("hide");
  });

  // click Close button of Filter item in Filter lists
  $(".filter-lists-content ul li .icon-filter-close-btn").click(function(){
    $(this).parent().addClass("hide");

    if($(".filter-lists-content ul li").length == $(".filter-lists-content ul li.hide").length)
    {
      $(".filter-lists-content").addClass("hide");
    }
  });

  // change the state of "Have read and agree with this terms" checkbox
  $(".agree-terms-checkbox").on("change", function(){
    if($(this).is(":checked")){
          $(".register-submit-btn").removeClass("disabled");
    }else{
          $(".register-submit-btn").addClass("disabled");
    }
  });

  // click Submit button in Registration page
  $(".register-submit-btn").click(function(){
    if(!$(this).hasClass("disabled"))
      window.location.href="challenge-details-private-2.html";
  });

  // init the scrollbar of dropdown popup
  if($('.scroll-page').length>0){
    $('.scroll-page').jScrollPane({
        verticalDragMinHeight:25,
        verticalDragMaxHeight:25
    });
  }

  // click dropdown to show popup
  $(".dropdown-select .select-toggle").click(function(){
    if($(this).parent().find(".select-menu").hasClass("hide"))
    {
      $(this).parent().find(".select-menu").removeClass("hide");
      $(this).parent().find(".select-menu").prev().addClass("shadow");
    }
    else
    {
      $(this).parent().find(".select-menu").addClass("hide");
      $(this).parent().find(".select-menu").prev().removeClass("shadow");
    }
  });

  // click outside of dropdown popup
  // $('body').click(function(evt) {
  //   if($(evt.target).parents('.dropdown-select').length>0)return;
  //   $(this).parent().find(".select-menu").addClass("hide");
  // });

  // click item in dropdown popup
  $(".dropdown-select .scroll-page ul li").click(function(){
    $(this).parents(".select-menu").addClass("hide");
    $(this).parents(".select-menu").prev().removeClass("shadow");
    $(this).parents(".select-menu").prev().html($(this).find("a").html()+"<i></i>")
  });

  // fix the height issue of list view rows
  if($(".list-content .col-md-8").length>0)
  {
    var lists = $(".list-content .col-md-8");
    for(var i=0;i<lists.length;i++)
    {
      lists.eq(i).next().height(lists.eq(i).height()+14);
      lists.eq(i).next().next().height(lists.eq(i).height()+14);
    }
  }

  $(".filter-content").addClass("hide");
  $(".grid-content").addClass("hide");
  $(".select-menu").addClass("hide");
});

Когда я нажимаю элемент тега привязки select-toggle, событие click не запускается. Более конкретно, приведенный ниже код не работает

  // click dropdown to show popup
  $(".dropdown-select .select-toggle").click(function(){
    if($(this).parent().find(".select-menu").hasClass("hide"))
    {
      $(this).parent().find(".select-menu").removeClass("hide");
      $(this).parent().find(".select-menu").prev().addClass("shadow");
    }
    else
    {
      $(this).parent().find(".select-menu").addClass("hide");
      $(this).parent().find(".select-menu").prev().removeClass("shadow");
    }
  });

Я стучу головой о стену с 12 часов, но я не могу понять, в чем проблема.