jQuery not working with select tag and ngSwitch, why?

Question

I'm building an interactive floorplan directory with svgs using AngularJS and a little bit of jQuery. The idea is that when you click on a name and/or department the slider will scroll to the floor its on and the room its located in using an href response. Once the room is found a flicker animation is supposed to happen over that room.

This was the original way the code was written and it worked fine.

<h2 class="show"  id="roomsHeading">Rooms</h2>
<ul class="rooms">
   <li class="show" ng-repeat="x in pan.people"><a href="{{x.room}}">{{x.department}}</a></li>
</ul>

But I wanted to replace the header with select and options tags to organize the directory. You can see below.

<select id="roomsHeading" class="custom-select show" ng-model="change">
   <option value="Default">All</option>
   <option class="options show" value="Departments">Departments</option>
   <option class="options show" value="Faculty">Faculty</option>
</select>
<ul class="rooms" ng-switch="change" >
   <li class="show" ng-switch-when="Default" ng-repeat="x in pan.people"><a href="{{x.room}}">{{x.department}}</a><a href="{{x.room}}">{{x.name}}</a></li>
   <li class="show" ng-switch-when="Departments" ng-repeat="x in pan.people">
      <a href="{{x.room}}">{{x.department}}</a>
   </li>
   <li class="show" ng-switch-when="Faculty" ng-repeat="x in pan.people">
      <a href="{{x.room}}">{{x.name}}</a>
   </li>
</ul>

Once I changed the header to select/options tags the jQuery stopped working. Here is a link to the demo. Demo

jQuery below:

$(function() {

    //overwrite jquery to match any case (by making uppercase)
    jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
    };

    var deactivateAll=function() {
        $('.roomHighlight').removeClass('active');
        $('.directory a').removeClass('active');
        $('g').removeClass('hasActiveCircle');
    }    

    var hideShowHeadings=function() {
        if($('.rooms .show').length >0) {
            $('#roomsHeading').addClass('show');
        }
        else {
            $('#roomsHeading').removeClass('show');
        }
        if($('.people .show').length >0) {
            $('#peopleHeading').addClass('show');
        }
        else {
            $('#peopleHeading').removeClass('show');
        }
    }

    $('.directory .rooms a').on( "click", function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        deactivateAll();

        $('#'+target).addClass('active')
        $(this).addClass('active')
        $('.slider').animate({scrollTop: $("#"+target).offset().top});
    });

    $('.directory .people a').on( "click", function(e) {
        e.preventDefault();
        var target = $(this).attr('href');
        deactivateAll();

        $(this).addClass('active')
        $('.slider').animate({
            scrollTop: $("#"+target).offset().top}, 200);
        $("#"+target).addClass('hasActiveCircle')
    });

    $('#searchBox').on( "input", function(e) {
        var searchMatch = $(this).val();
        console.log( searchMatch);

        if(searchMatch =="") {
            $("li").addClass("show");
        }
        else {
            $("li").removeClass("show");
            $("li:contains("+searchMatch+")").addClass("show");
            hideShowHeadings();
        }

    });
});