Collapsible Panels With Up/Down Arrow Icon?

I have designed an accordion with up and down arrows. When I click on the whole row it is collapsing fine, but when I directly click on up/down icons it toggles the icons but does not toggle my accordion (not opening/closing my accordion). It calls my function but does not change the accordion.

I am using material icons as my icons and angularjs to call the function when I click on my accordion.

I do not know how to fix my icons behavior!

Any help much appreciate.

Here is just a piece of my code to see how I defined my accordion:

//Here is my angularjs code.

$scope.showTest = false;

$scope.toggleShowTest = function () {
  $scope.showTest = !$scope.showTest;
<div class="card">
    <div class="row" data-toggle="collapse" data-target="#test" aria-expanded="false" 
         aria-controls="test" style="cursor: pointer;" ng-click="toggleShowTest()">
        <div class="col-6 col-md-4" id="header">
            <h4 class="mb-0">
                Transaction Report
        <div class="col col-md offset-md-4">
                <i class="material-icons" ng-if="!showTest">keyboard_arrow_down</i>
                <i class="material-icons" ng-if="showTest">keyboard_arrow_up</i>
    </div><!-- row ends -->
    <div id="test" class="collapse" aria-labelledby="header">
        <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Source: AngularJS