bootstrap options width is too long – Twitter bootstrap

I have a dropdown list of options that I’m getting from the DB. The option data being returned is very long strings of data. I’d like to max out the width of the options.

<span class="col-sm-4"><label>Lists:</label></span>
<span class="col-sm-4">
        <select class="form-control selectwidthauto" name="ListValues" id="ListValues" ng-model="ListValue">
            <option ng-repeat="sValue in ListValues" value="{{sValue.DisplayId}}" ng-model="List.Name">{{sValue.Name}}:{{sValue.DisplayName }}- ({{sValue.DisplayId}})</option>
        </select>
</span>

I used a CSS snippet from another question: Change width of select tag in Twitter Bootstrap

Where I’m changing the width of the select box:

.selectwidthauto {
    width:50% !important;
        text-overflow:ellipsis;
        display: inline-block;
}

However, only the select container seems to be controlled (in width). When the options get loaded I’m still getting the full width of the text that is in the options (which contains very long strings).

How can I get my options to match the width of the select (which in this case is 50%), or any size other than full width (auto)?

Just incase what I wrote isn’t explained well enough. I created a fiddle that although is not in Angular it describes what is happening:

https://jsfiddle.net/tm1qasjg/3/

I need the option values to cut off the text at a certain size. I don’t want it to display the entire text value.