IE, ng-repeat for select cutting text or showing {{}}

Question

Basic Problem

I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the {{}} placeholder until the item is clicked.

I'd simply like a way for me to display the elements in a correct fashion without bugs.

Finally, this behavior seems to happen if an element is added to the categories array after the page and select has rendered.

With ng-bind

<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
        ng-model="selectedCategories"
        ng-change="angularCategorySelectedGrants($event)"
   <option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>

Without ng-bind

<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
        ng-model="selectedCategories"
        ng-change="angularCategorySelectedGrants($event)"
   <option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>

With ng-options

With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.

<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
    ng-model="selectedCategories"
    ng-change="angularCategorySelectedGrants($event)"
    ng-options="cat.name for cat in categories track by cat.id" >
</select>

Since no-one wrote an answer, see my own work-around as the accepted answer.

Answer 1

My own workaround

It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:

1. Add all elements to the array only once without adding again OR
2. Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.

In HTML (wrapping the select):

<div ng-if="categories!=undefined && categoriesLoaded">
    ...Select code here...
</div>

In the controller (Javascript):

$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){  $scope.categoriesLoaded = true;}, 0);