AngularJS Bug? - Select Multiple - Dynamically set size dependent on number of options

Question

I want to dynamically control the size of a multi-select.

html

<select 
    class="form-control" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests"
    multiple="true"
    ng-multiple="true"
    name="tests"
    id="tests"
    size="{{ tests.length }}"
    ng-size="{{ tests.length }}">
</select>

js

$http({ method: 'GET', url: '/api/v1/test' })
    .success(function(data, status, headers, config) {
        $scope.tests = data;
    })
    .error(function(data, status, headers, config) {});

Output from inspect element

<select 
    class="form-control ng-valid ng-dirty" 
    ng-model="formData.selected_tests" 
    ng-options="c.test for c in tests" 
    multiple="true" 
    ng-multiple="true" 
    name="tests" 
    id="tests" 
    size="0" 
    ng-size="7">
        ... Options ...
</select>

Notice how size attribute remains at 0, however ng-size changes to 7 despite the same interpolated tests.length being used.

Further, despite there being a total of 7 options, the browser rendered size only displays 4 options.

Manually changing size="0" to size="7" within google chrome's element inspector, changes the size of the select.

Answer 1

I had some problems with @size. Try ng-attr-size, as:

<select
    ...
    ng-attr-size="{{ tests.length }}">
</select>

Answer 2

Actually it is data-ng-attr-size="{{ tests.length }}".

The github issue 1619 describes this problem. It seems to be solved since angularjs 1.1.4 in this commit. There's an example for usage on plunker.