jquery click event is not working with angular.js ng-repeat

Problem

I have a nested (tertiary) menu list with a jquery click event on the back. jQuery click does not fire when the menu item is clicked. The jQuery event works well if the values inside the HTML are static.

HTML:

<div>
<ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
        <a class="collapsible-list-parent">{{view.name}}</a>
        <ul class="collapsible-list secondary">
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Public Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="publicview in view.publicviews">
                        <a>{{publicview.title}}</a>
                    </li>
                </ul>
            </li>
            <li class="collapsible-list-subnav">
                <a class="collapsible-list-parent">Private Views</a>
                <ul class="collapsible-list tertiary">
                    <li ng-repeat="privateview in view.privateviews">
                        <a>{{privateview.title}}</a>
                    </li>
                </ul>
            </li>   
        </ul>
    </li>
</ul>

Javascript:

define([ 'angular', 'controllers-module'], function(angular,
    controllers) {

    controllers.controller("ViewCtrl", [
        "$scope",
        "$rootScope",
        "directiveBinder",
        '$timeout',
        '$stateParams',
        '$resource',
        '$state',
        function($scope, $rootScope,directiveBinder, $timeout, $stateParams, $resource, $state) {

            $scope.engines = [ {
            name : 'name1',
            publicviews : [ {
                title : 'First public View'
            } ],
            privateviews : [ {
                title : 'First private View'
            } ]
        }, {
            name : 'name2',
            publicviews : [ {
                title : 'Second public View'
            } ],
            privateviews : [ {
                title : 'Second private View'
            } ]
        } ];

        $('.collapsible-list-parent').click(function(e) {
            e.preventDefault();
            $(this).next().slideToggle('fast');
            if ($(this).parent().hasClass('open')) {
                $(this).parent().removeClass('open');
            } else {
                $(this).parent().addClass('open');
            }
        });
    });
Problem courtesy of: brainmassage

Solution

Because the elements are added dynamically by ng-repeat the .click event is not binded to them. Try to use .delegate

$( "ul" ).delegate( ".collapsible-list-parent", "click", function() {
  // code here
});
Solution courtesy of: Cristi Marian

Discussion

When we use ng-repeat and need to trigger a jquery click event just try this it worked for me.

$(document).on("click", ".className", function() {

//your code here...

});
Discussion courtesy of: Sreekanth Karini

I don't think using jQuery code in an angularjs controller is the right way to do this, a sample to do the same without the animation will be like

var app = angular.module('my-app', [], function() {

})

app.controller('ViewCtrl', function($scope) {
  $scope.views = [{
    name: 'name1',
    publicviews: [{
      title: 'First public View'
    }],
    privateviews: [{
      title: 'First private View'
    }]
  }, {
    name: 'name2',
    publicviews: [{
      title: 'Second public View'
    }],
    privateviews: [{
      title: 'Second private View'
    }]
  }];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <ul class="collapsible-list" ng-controller="ViewCtrl">
    <li class="collapsible-list-subnav" ng-repeat="view in views">
      <a class="collapsible-list-parent" ng-click="open = !open">{{view.name}}</a>
      <ul class="collapsible-list secondary" ng-show="open">
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="popen = !popen">Public Views</a>
          <ul class="collapsible-list tertiary" ng-show="popen">
            <li ng-repeat="publicview in view.publicviews">
              <a>{{publicview.title}}</a>
            </li>
          </ul>
        </li>
        <li class="collapsible-list-subnav">
          <a class="collapsible-list-parent" ng-click="ropen = !ropen">Private Views</a>
          <ul class="collapsible-list tertiary" ng-show="ropen">
            <li ng-repeat="privateview in view.privateviews">
              <a>{{privateview.title}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>


If you want to use animations you can make use of angularjs animation which uses css3 animations.

Discussion courtesy of: Arun P Johny

This recipe can be found in it's original form on Stack Over Flow.