isotope filtering not working on nav-pills tabs

Question

I have three nav-pills set up. When somebody selects a new pill/tab and clicks on any of the content inside the tabbed area, it correctly sorts my isotope. This is all good.

When the person clicks on a new pill/tab, it shows the correct tabbed content below and clicking on any of that content sorts the isotope correctly. So that is all good too.

But the issue is that the isotope is not sorted with my data-filtering when the actual tab is selected. It still shows the sort from the last thing the person selected in the old tab. I was hoping this value: data-filter-value (i.e. data-filter-value=".convertible") on the nav-pills OR the tabpanel would cause the filtering to take place on the "click" but no luck.

Here is my code:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 padleft40" id="filters-one"> <!-- FILTERS ONE -->
    <h4 class="sidebar_header">What Type of Car Interests You?</h4>                             
    <ul class="nav nav-pills" role="tablist" id="myPill">
        <li role="presentation"><a href="#all" aria-controls="all" role="tab" data-toggle="tab" id="cartype_btn0" data-filter-value="*">Show all</a></li>
        <li role="presentation"><a href="#convertible" aria-controls="convertible" role="tab" data-toggle="tab" data-filter-value=".convertible">Convertible</a></li>
        <li role="presentation"><a href="#sedan" aria-controls="sedan" role="tab" data-toggle="tab" data-filter-value=".sedan">Sedan</a></li>
    </ul>   
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="all" data-filter-value="*"> <!-- ALL CARS -->
        <span><img src="/images/photos/other/showroom2.jpg" alt="#" width="300" /></span><br><br><h3>For All Cars</h3><h5 id='filter5-checker'>Anticipated Use?</h5>
            <span class="button-group">
                <button class='button is-checked' data-filter-value='*'>show all</button><button class='button' data-filter-value='.light-touring'>Tour Local Roadways</button><button class='button' data-filter-value='.racing, .performance'>Racing</button><br>
            </span>
        </span>
    </div> <!-- // TABPANEL FOR ALL CARS-->
    <div role="tabpanel" class="tab-pane" id="convertible" data-filter-value=".convertible"> <!-- CONVERTIBLES -->

I won't show all of the tabpanels...

    </div> <!-- //CONVERTIBLES -->


    </div> <!-- // TABCONTENT -->
    <script>
            $(function () {
                $('#myPill a:first').tab('show')
            })
    </script>
</div> 
<div class="col-lg-8 col-sm-8 col-sm-6 col-xs-12 padbot20">
    <!-- <div class="container"> -->
            <div class="isotope center" id="car_isotope_gallery">
                        <b>Isotope photos will be listed here.</b>
            </div> <!-- Isotope ends here -->
</div><!-- //PHOTO CONTAINER -->

Here is the filtering code. I believe I haven't changed anything from the standard isotope filtering:

/******** REBUILD COMBO FILTER FUNCTION *********/
    function rebuildComboFilter(filterType, filterValue) {
        var newFilterArray = [];
        var newFilterString = '';
        storedComboFilterObject[filterType] = filterValue;
        for (var type in storedComboFilterObject) {
            if (storedComboFilterObject[type] === '*' && _.contains(newFilterArray, '*')) {
                // do nothing: * already present, do not add another * to filters
            } else {
                newFilterArray.push(storedComboFilterObject[type]);
            }
        }

        // sort filters to push a possible * ahead of defined classes
        newFilterArray.sort(function (a, b) {
            return (a === "*") ? -1 : 1;
        });

        newFilterString = newFilterArray.join('');
        storedFilterString = newFilterString;
        $('#filterstringmonitor').val(storedFilterString);
        $container.isotope({ filter: storedFilterString });
    }
    /******** END REBUILD COMBO FILTER FUNCTION *********/


    // respond to click in button-group and rebuild combo filters - check filterSelectors object
    $('.button-group').on('click', 'button', function() {
        var filterValue = $(this).attr('data-filter-value');
        if (filterSelectors[filterValue]) {
            filterValue = filterSelectors[filterValue];
        } else {
            filterValue = filterValue;
        }
        rebuildComboFilter($(this).parent('.button-group').attr('id'), filterValue);
    });

    // change is-checked class on buttons
    $('.button-group').each(function(i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });