JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="Ctrl" id="midi-ctrl">
        <table>
            <tr ng-repeat="plugin in plugins">
                <td><strong>{{plugin.name}}</strong>

                </td>
                <td>
                    <select class="span1" ng-model="selected[$index].selectedChannel" ng-options="item.ID as item.Title for item in channels" />
                </td>
                <td>
                    <select class="span2" ng-model="selected[$index].selectedDevice" ng-options="item.ID as item.Title for item in devices" />
                </td>
                <td>{{plugin}}</td>
            </tr>
        </table>{{selected}}</div>
</div>

JavaScript

function Ctrl($scope) {
    $scope.plugins = [{
        name: 'A'
    }, {
        name: 'B'
    }];
    $scope.channels = [{
        ID: 'all',
        Title: 'All'
    }, {
        ID: '0',
        Title: '1'
    }, {
        ID: '1',
        Title: '2'
    }, {
        ID: '2',
        Title: '3'
    }];

    $scope.devices = [{
        ID: '0',
        Title: 'Device A'
    }, {
        ID: '1',
        Title: 'Device B'
    }, {
        ID: '2',
        Title: 'Device C'
    }, {
        ID: '3',
        Title: 'Device D'
    }, ];

    $scope.selected = [];
    angular.forEach($scope.plugins, function (a) {
        $scope.selected.push({
            selectedChannel: undefined,
            selectedDevice: undefined
        });
    })
}