I have the following AngularJS code, which works fine on an iPhone. However, when using Chrome on an Android device, the button is unresponsive and nothing happens when it is pressed.

I have tried various solutions found here and on the internet, but none of them have resolved the issue.

here is my html code :

                <div class="col-sm-12">
                    <div class="mda-form-group">
             <select class="mda-form-control" ng-model="accident.roadType" ng-               change="chooseTrack(accident.roadType)">
                            <option value=""></option>
                            <option value="test1">test1</option>
                            <option value="test2">test2</option>
                            <option value="test3">test3</option>`
                        </select>
                        <label>test</label>
                    </div>
                </div>

and this my Css code :

.mda-form-control {
    position: relative;
    z-index: 5;
    width: 100%;
    height: 34px;
    padding: 2px;
    color: inherit;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dde6e9;
    border-radius: 0;
    box-shadow: none;
}
.mda-form-group {
    position: relative;
    padding: 18px 0 24px 0;
}

I attempted several solutions to resolve the issue, including modifying the CSS styling and adding the default AngularJS libraries. For instance, I included the following script:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Additionally, I tried integrating the needsclick library, but unfortunately, the problem persists.