Scrollable Dropup Menu in Angular Js

Question

My Dropup looks like this ->

<div class="dropup">
   <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                {{selectList.selectedListItem}}
        <div class="ripple-container"></div>
   </button>
   <div class="dropdown-menu">
      <a class="dropdown-item" ng-repeat="list in roleList" href="#" ng-value="list.role" name="{{list.role}}" ng-click="update(list.role, list._id)" id="{{list.role}}" ng-model="selectList" name="selectedList">{{list.role}}</a>
   </div>
</div>

And I am using CSS on dropup-menu as ->

overflow: scroll;
max-height: 200px;

But it doesn't work for me. Any other solution ?

Update After Adding this Css to dropdown-menu- >

overflow: scroll;
max-height: 200px !important;

My dropdown-menu now looks like without scrollable->

Answer 1

In your outer most div add this in style attribute

<div class="dropdown-menu" style="height: 200px;overflow: auto;">

This worked for me.