slideToggle function stops working when toggling ng-show

Question

I have two buttons, which change the views with ng-show, and I have a filter on the default view. Filter is a dropdown that works with SlideToggle() and it works until I click the other button and go to the second view and when I click bac to the default one, dropdown stops working. I've inspected it in Chrome, nothing happens this is the code for the dropdown:

<div ng-if="filter.entity === 'user'" class="col-md-12 filter-group">
<h5 class="open">Age<span class="caret"></span></h5>
   <div class="filter-group-items filter">
       <div>Age
         <rzslider rz-slider-model="filter.ageMin" rz-slider high="filter.ageMax" rz-slider-options="sliderOptionsAmount">
         </rzslider>
       </div>
   <div>
</div>

This it the js

  $(".open").click(() => {
  $(".filter").slideToggle()
  })

Answer 1

The problem is the same like binding events on AJAX loaded content, see How to bind Events on Ajax loaded Content?

jQuery event binding for dynamic content should look like this:

$(document).on("click", ".open", () => { $(".filter").slideToggle(); });