md-autocomplete with bootstrap's class="modal-content" not working - angularjs

Question

My Main Modal Component is:-
<div class="modal-content">
<div class="modal-header"> </div>
<div class="modal-body">
<display-states-component rolesdata="$ctrl.modaldata.displayStatesRoles"></display-states-component>
</div>
</div>
DisplayStatesComponent is(Angular 1.5 Component architecture)
<form ng-submit="$event.preventDefault()">
<md-autocomplete md-no-cache="true" md-selected-item="$ctrl.displayPerRoles[$index].roleName" md-search-text="$ctrl.searchText" md-items="item in $ctrl.querySearch($ctrl.searchText)" md-item-text="item.value" md-min-length="0" placeholder="Select Role?">
<md-item-template>
<span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.value}}</span>{{item.value}}
</md-item-template>
<md-not-found>
No role matching "{{$ctrl.searchText}}" were found.
<a ng-click="$ctrl.manageStates('ADD')">Create a new one!</a>
</md-not-found>
</md-autocomplete>
</form>
And MY Corresponding Display States Controller is:-
$ctrl.states = loadAll();
$ctrl.querySearch = function(query) {
var results = query ? $ctrl.states.filter(createFilterFor(query)) : $ctrl.states,
deferred;
console.log("With my Testings in else--->", results);
return results;
}
/**
* Build `states` list of key/value pairs
*/
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map(function(state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
My Filter Functions are
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
}
};
I am using this code to search for states as the user types state name in autocomplete box. I am getting the results on console but that is not showing item text (I think getting hidden behind bootsrap's modal).
Thanks in advance.