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="truncatedSelect"
        ng-model="myModel">
        <option
            ng-repeat="(label, value) in options"
            truncate-option="label"></option>
    </select>
    
</div>

CSS

div {
    padding: 10px;
}

.truncatedSelect {
    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": "option1label",
				"value": "option1value"
			},
			{
				"label": "option2label",
				"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 maxLength = element[0].style.fontSize.replace('em','');
            console.log('maxLength: ', maxLength);
			if ( scope.label.length > maxLength )
				scope.label = scope.label.slice( 0 , maxLength-3 ) + '…';
		}
	};
});