Select tag and directive on ion nav bar

I am trying to integrate this dropdown select component (https://github.com/john-oc/acute-select) into our project. It works great when I place it on ion-content but I have troubles when I try to place it on the ion nav bar because the select bar is distorted and i cannot make it work. I tried the ff codes:

<ion-view title="">
    <ion-nav-buttons side="left">
          <select class="ac-select stateList" 
                      ac-model="ddSelectSelected" 
                      ac-options="category.value for category in ddSelectOptions" 
                      ac-settings="{ comboMode: false, loadOnOpen: true, 
                      minWidth: '300px', itemsInView: ddSelectOptions.length }" 
                      ac-change="categorySelected(value)">
          </select>
    </ion-nav-buttons>
</ion-view>

The first image below is the output when the dropdown select component is placed on the ion-content and is supposed to be the output when the dropdown select will be placed on the ion nav bar but unfortunately it displays the output found on the second picture and does not function as how it should be (like when clicked, displays the dropdown list).

image

image

Any of you have an idea where and what I did wrong or I should know for this to work on the nav bar? Thanks in advance!