title: bootstrap collapse event hidden.bs.collapse not being detected
body: <p>I have an angular application that uses bootstrap collapse element.
  I've created a directive called accordion-list that host the collapsible elements.
  Then, to listen to the events, i've used jquery event delegation.
  For some reason, my application can't detect when the bootstrap fires the <a href="http://getbootstrap.com/javascript/#collapse-usage" rel="noreferrer">hidden.bs.collapse</a> event.
  Here is my code:</p>
  
  <pre><code>//app.js
      'use strict';
  
  (function () {
      var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [
          'restClient'
      ]);
  
      provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){
          $scope.inscricao = {
              "Secretaria": ""
          };
  
          $("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
              if ($(this).hasClass("in")) {
                  $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
                  $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
              } else {
                  $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
                  $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
              }
  
              console.log(1, this, event); // i have detected the problem by interpreting 
          });
  
          ListaInscricao.get({"id": 1}, function(data){
              if (data.Sucesso) {
                  $scope.inscricao = data.Dados;
              } else {
                  // toastr
              }
          });
      }]);
  
      provasNaoIdentificadas.directive('accordionList', function() {
          return {
              "restrict": "E",
              "templateUrl": "partials/accordion.html"
          };
      });
  })();
  </code></pre>
  
  <p>Help you guys can help me. Thanks in advance. :)</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here's my files:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="provasNaoIdentificadas"&gt;
      &lt;head&gt;
          &lt;title&gt;Hábile: Inscrição De Escolas Públicas Para Provas Não Identificadas&lt;/title&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;
          &lt;link rel="stylesheet" href="css/vendor/bootstrap.min.css" /&gt;
          &lt;script src="js/vendor/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/vendor/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/vendor/angular-resource.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
          &lt;script src="js/rest-client.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              .panel-heading {
                  cursor: pointer;
              }
  
              .panel-heading .panel-title span.pull-right.text-muted {
                  font-size: 10px;
              }
  
              .panel-heading .panel-title span.pull-right.text-muted.expandir:before {
                  content: "clique para expandir";
              }
  
              .panel-heading .panel-title span.pull-right.text-muted.fechar:before {
                  content: "clique para fechar";
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="well text-justify"&gt;
                  &lt;h3&gt;Formul&amp;aacute;rio de Inscri&amp;ccedil;&amp;atilde;o H&amp;aacute;bile 2014&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div ng-controller="accordionCtrl"&gt;
                  &lt;h2 id="nomeSecretaria"&gt;{{ inscricao.Secretaria }}&lt;/h2&gt;
                  &lt;accordion-list&gt;&lt;/accordion-list&gt;
              &lt;/div&gt;
              &lt;div class="text-center"&gt;
                  &lt;button type="button" class="btn btn-lg btn-primary"&gt;Salvar Inscrição&lt;/button&gt;
                  &lt;button type="button" class="btn btn-lg btn-warning"&gt;Finalizar Inscrição&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>partials/accordion.html</p>
  
  <pre><code>&lt;!-- partials/accordion.html --&gt;
  &lt;div class="panel-group" id="accordion_escolas"&gt;
      &lt;div class="panel panel-default" ng-repeat="escola in inscricao.Escolas"&gt;
          &lt;div class="panel-heading" data-toggle="collapse" data-target="#escola{{ $index }}" data-parent="#accordion_escolas"&gt;
              &lt;div class="panel-title"&gt;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                  {{ escola.Nome }} &lt;span class="text-muted"&gt;x alunos inscritos&lt;/span&gt;
                  &lt;span class="pull-right text-muted expandir"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="escola{{ $index }}" class="panel-collapse collapse"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;
                      &lt;label for="qtdProfessoresEscola{{ $index }}"&gt;Qtd. Professores&lt;/label&gt;&lt;br /&gt;
                      &lt;input class="form-control" type="text" id="qtdProfessoresEscola{{ $index }}}}" value="{{ escola.QtdProfessores }}" /&gt;
                  &lt;/p&gt;
                  &lt;div class="panel-group" id="accordion_escola{{ $index }}"&gt;
                      &lt;div class="panel panel-default" ng-repeat="serie in escola.Series"&gt;
                          &lt;div class="panel-heading" data-toggle="collapse" data-target="#turma_{{ $index }}_escola{{ $parent.$index }}" data-parent="#accordion_escola{{ $parent.$index }}"&gt;
                              &lt;div class="panel-title"&gt;
                                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;
                                  {{ serie.Nome }} &lt;span class="text-muted"&gt;y alunos inscritos&lt;/span&gt;
                                  &lt;span class="pull-right text-muted expandir"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div id="turma_{{ $index }}_escola{{ $parent.$index }}" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;table class="table table-hover table-condensed table-bordered"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;Turma&lt;/th&gt;
                                              &lt;th&gt;Qtd Alunos&lt;/th&gt;
                                              &lt;th&gt;Qtd Testes A3&lt;/th&gt;
                                              &lt;th&gt;Alunos PCD&lt;/th&gt;
                                              &lt;th&gt;&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                          &lt;tr ng-repeat="turma in serie.Turmas"&gt;
                                              &lt;td&gt;{{ turma.Nome }}&lt;/td&gt;
                                              &lt;td&gt;&lt;input class="form-control" type="text" value="{{ turma.QtdAlunos }}" /&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;input class="form-control" type="text" value="{{ turma.QtdTestesA3 }}" /&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;input class="form-control" type="text" value="{{ turma.AlunosPCD }}" /&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;button class="btn btn-primary btn-sm" type="button"&gt;Excluir Turma&lt;/button&gt;&lt;/td&gt;
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
                                  &lt;p&gt;
                                      &lt;button class="btn btn-primary" type="button"&gt;Adicionar Turma&lt;/button&gt;
                                  &lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js/app.js:</p>
  
  <pre><code>/* js/app.js */
  'use strict';
  
  (function () {
      var provasNaoIdentificadas = angular.module("provasNaoIdentificadas", [
          'restClient'
      ]);
  
      provasNaoIdentificadas.controller("accordionCtrl", ["$scope", "ListaInscricao", function($scope, ListaInscricao){
          $scope.inscricao = {
              "Secretaria": ""
          };
  
          $("accordion-list").on("hidden.bs.collapse shown.bs.collapse", ".collapse", function (event) {
              if ($(this).hasClass("in")) {
                  $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-minus");
                  $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("fechar");
              } else {
                  $(this).prev().find(".glyphicon").removeClass("glyphicon-plus glyphicon-minus").addClass("glyphicon-plus");
                  $(this).prev().find("span.pull-right.text-muted").removeClass("expandir fechar").addClass("expandir");
              }
  
              console.log(1, this, event);
          });
  
          ListaInscricao.get({"id": 1}, function(data){
              if (data.Sucesso) {
                  $scope.inscricao = data.Dados;
              } else {
                  // toastr
              }
          });
      }]);
  
      provasNaoIdentificadas.directive('accordionList', function() {
          return {
              "restrict": "E",
              "templateUrl": "partials/accordion.html"
          };
      });
  })();
  </code></pre>
  
  <p>js/rest-client.js:</p>
  
  <pre><code>/* js/rest-client.js */
  'use strict';
  
  (function(){
      var restClient = angular.module('restClient', ['ngResource']);
  
      restClient.factory('ListaInscricao', ['$resource', function ($resource) {
          return $resource('mock/lista_inscricao.json');
      }]);
  })();
  </code></pre>
  
  <p>mock/lista_inscricao.json:</p>
  
  <pre><code>{
      "Sucesso": true
      ,
      "Mensagem": ""
      ,
      "Dados": {
          "Secretaria": "Secretaria de Educação ABC"
          ,
          "Escolas": [
              {
                  "Nome": "Escola 1"
                  ,
                  "QtdProfessores": 12
                  ,
                  "Series": [
                      {
                          "Nome": "1º Ano Ensino Médio"
                          ,
                          "Turmas": [
                              {
                                  "Nome": "A"
                                  ,
                                  "QtdAlunos": 30
                                  ,
                                  "QtdTestesA3": 0
                                  ,
                                  "AlunosPCD": "27,29"
                              }
                              , {
                                  "Nome": "B"
                                  ,
                                  "QtdAlunos": 28
                                  ,
                                  "QtdTestesA3": 2
                                  ,
                                  "AlunosPCD": ""
                              }
                          ]
                      }
                      ,
                      {
                          "Nome": "2º Ano Ensino Médio"
                          ,
                          "Turmas": [
                              {
                                  "Nome": "A"
                                  ,
                                  "QtdAlunos": 25
                                  ,
                                  "QtdTestesA3": 1
                                  ,
                                  "AlunosPCD": "7"
                              }
                          ]
                      }
                  ]
              }
              ,
              {
                  "Nome": "Escola 2"
                  ,
                  "QtdProfessores": 10
                  ,
                  "Series": [
                      {
                          "Nome": "3º Ano Ensino Médio"
                          ,
                          "Turmas": [
                              {
                                  "Nome": "A"
                                  ,
                                  "QtdAlunos": 30
                                  ,
                                  "QtdTestesA3": 0
                                  ,
                                  "AlunosPCD": "15,27"
                              }
                              , {
                                  "Nome": "B"
                                  ,
                                  "QtdAlunos": 26
                                  ,
                                  "QtdTestesA3": 0
                                  ,
                                  "AlunosPCD": ""
                              }
                              , {
                                  "Nome": "C"
                                  ,
                                  "QtdAlunos": 25
                                  ,
                                  "QtdTestesA3": 0
                                  ,
                                  "AlunosPCD": ""
                              }
                          ]
                      }
                  ]
              }
          ]
      }
  }
  </code></pre>