Truncating Select Options

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<div ng-controller="MyController">
    
    <select
        class="truncated-select">
        <option
            ng-repeat="option in options"
            value="{{option.value}}"
            truncate-option="option.label">{{option.label}}</option>
    </select>
    
</div>

CSS

div {
    padding: 10px;
}

.truncated-select {
    font-family: Consolas, monospace !important;
    font-size: 14px;
    max-width: 10em;
}

JavaScript

var app = angular.module('MyApp', []);

app.controller('MyController', [
	'$scope',
	function MyController( $scope ) {
		$scope.options = [
			{
				"label": "1label",
				"value": "option1value"
			},
			{
				"label": "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
				"value": "option2value"
			},
			{
				"label": "option3label",
				"value": "option3value"
			}
		];
		$scope.myModel = $scope.options[0];
	}
]);

app.directive('truncateOption', function truncateOption() {
	return {
		restrict: 'A',
		scope: {
			label: '=truncateOption'
		},
		link: function postLink(scope, element) {
			var selectElm = element.parent(),
                maxWidth  = selectElm.css('max-width').replace('px',''),
                fontSize  = selectElm.css('font-size').replace('px',''),
                maxLength = Math.floor(maxWidth / fontSize);
			if ( scope.label.length > maxLength )
				scope.label = scope.label.slice( 0 , maxLength-1 ) + '…';
		}
	};
});