Using AngularJS to Filter WordPress Output

I've been working on developing a WordPress plugin that allows a user to filter a listing of posts using AngularJS. So far, the filter works but only with case sensitive terms. Is there a way to make the filter case insensitive? Also, I would like the month heading to disappear when no posts correspond to the filter terms. Can't quite seem to figure out the logic needed to make this happen. Any suggestions are greatly appreciated.

Here's my PHP code:

get_header();
wp_enqueue_script('pie_angularjs');
wp_enqueue_script('pie_js');
wp_enqueue_style('pie_frontend');

?>

<div id="container" ng-app="pieApp">

    <?php get_template_part ( '/inc/inc_leftnav' );
    $pie_post_args = array(
        'meta_query'    => array(
            array(
                'key'           => 'pie_date',
                'compare'   => 'EXISTS',
                'type'          => 'NUMERIC'
            )
        ),
        'post_type'                 => 'pie',
        'meta_key'              => 'pie_date',
        'orderby'                   => 'meta_value',
        'order'                     => 'ASC'
    );
    ?>


    <?php $loop = new WP_Query( $pie_post_args );  ?>
    <div id="main-col02" role="main" ng-controller="sortCtrl">

        <div class="entry-content" pie-filter="model.filter" element="article">
            <!--archive-pie.php-->
            <h2>Practice Initiative Education (PIE)</h2>

            <input type="text" ng-model="model.filter" placeholder="Filter by audience/setting" />

            <?php  while ( $loop->have_posts() ) : $loop->the_post(); ?>

                <?php $monthheading = PIE::convert_pie_date(get_post_meta(get_the_ID(), 'pie_date', true)); ?>

                <div class="month-listings">

                <?php if ( $nextmonth != $monthheading ) { ?>


                    <div class="pie-header-bar">

                        <div class="pie-header-bar-date-col"><?php echo $monthheading; ?></div>

                        <div class="pie-header-bar-audience-setting-col">Audience</div>

                        <div class="pie-header-bar-course-code-col">Settings</div>

                    </div>

                <?php } ?>


                <article id="post-<?php get_the_ID(); ?>"  class="single-pie-entry">

                    <div class="pie-info-col">

                        <h4 class="pie-class-name-header"><?php the_title(); ?></h4>

                        <p>

                            <strong>Course Code:</strong>

                            <?php $courseCode = esc_html ( get_post_meta ( get_the_ID(), 'pie_cc', true ) ); ?>

                            <?php echo $courseCode; ?>  <span class="cpycc" data-copy="<?php echo $courseCode; ?>">(copy)</span>

                        </p>

                        <p>

                            <strong>Objectives:</strong>

                            <?php echo htmlspecialchars_decode ( get_post_meta ( get_the_ID(), 'pie_obj', true ) ); ?>

                        </p>

                    </div>

                    <div class="pie-audience-col">

                        <?php $audiences = get_the_terms( get_the_ID(), 'audience'); ?>

                        <?php if ( count($audiences) == 0 ) return; ?>

                        <ul class="pie-term-list audiences-list">

                            <?php foreach ( $audiences as $audience ): ?>

                                <li class="<?php echo $audience->slug; ?>">

                                    <?php echo $audience->name ?>

                                </li>

                            <?php endforeach; ?>

                        </ul>

                    </div>

                    <div class="pie-settings-col">

                        <?php $settings = get_the_terms( get_the_ID(), 'settings'); ?>

                        <?php if ( count($settings) == 0 ) return; ?>

                        <ul class="pie-term-list settings-list">

                            <?php foreach ( $settings as $setting ): ?>

                                <li class="<?php echo $setting->slug; ?>">

                                    <?php echo $setting->name ?>

                                </li>

                            <?php endforeach; ?>

                        </ul>


                    </div>

                </article><!-- #post-## -->

                <hr />

                </div> <!-- .month-listings -->

                <?php
                $nextmonth = $monthheading;
            endwhile; // end of the loop.  ?>

        </div>

    </div>

    <?php wp_reset_query();

    get_sidebar();

    get_footer(); ?>

</div>

Here's my AngularJS code:

(function($) {
    var pieApp = angular.module('pieApp',[]);

    pieApp.controller( 'sortCtrl', function($scope) {
        $scope.model = {
            filter: ''
        };
    });

    pieApp.directive( 'pieFilter', [ function() {
        return {
            restrict: 'A',
            scope: {
                filter: '=pieFilter',
                element: '@'
            },
            link: function( scope, elem, attrs ) {
                scope.$watch( 'filter', function( newval, oldval ) {
                    elem
                        .find('.month-listings')
                        .hide()
                        .find(scope.element || '*')
                        .filter(':contains("' + scope.filter + '")')
                        .parent()
                        .show();

                })
            }
        }
    }])
})();

Here's what the output looks like when there are no terms inputted and when the term PCT is inputted (notice how all the letters are uppercase):

enter image description here enter image description here

via Chebli Mohamed