Angular select within a ng-repeat directive: how can I access the children scopes?

Question

I've got an ng-repeat-ed table row, inside wich are a pair of angular selects:

    <div ng-controller="midiCtrl" id="midi-ctrl">
        [...]

                <tr ng-repeat="plugin in plugins">
                    <td><strong>{{plugin.name}}</strong></td>
                    <td>
                       <select class="span1" ng-model="selectedChannel" ng-options="item.ID as item.Title for item in channels">
                    </td>
                    <td>
                        <select class="span2" ng-model="selectedDevice" ng-options="item.ID as item.Title for item in devices">
                    </td>
                </tr>

        [...]
    </div>

The controller is:

    app.controller('midiCtrl', function ($scope, pluginDisplayedWindows) {

        $scope.plugins = pluginDisplayedWindows.pluginsDisplayed; // An object          

        $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'},
        ];

    });

Now, I know that when one of the selects is selected, the corresponding object is set on the ng-model scope variable ($scope.selectedChannel or $scope.selectedDevice), but obviously it is set in the corresponding ng-repeat child scope.

How can I access the children scopes, in the controller? I want to save all the selections when the user presses a button, but if I try to do that in the midiCtrl controller, I can't access to the children scopes created by ng-repeat.

Answer 1

The simplest trick is to add the selected values to current plugin object, so you can easily get the selected values and those values are bound to the correct plugin object naturally. No other objects will be introduced. Very simple.

<select class="span1" ng-model="plugin.selectedChannel" ng-options="item.ID as item.Title for item in channels">
<select class="span2" ng-model="plugin.selectedDevice" ng-options="item.ID as item.Title for item in devices">

Working Demo 1

If you want store it separately, you can do

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

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

Working Demo 2

Answer 2

You can define the selected object in the parent controller first. Objects you data-bind should always "have a dot" in them to avoid issues with prototypical inheritance, so you should bind to something like "selected.channel" rather than "selectedChannel"

app.controller('midiCtrl', function ($scope, pluginDisplayedWindows) {

$scope.plugins = pluginDisplayedWindows.pluginsDisplayed; // An object     


$scope.selected = {};
$scope.selected.channel = {};
$scope.selected.device = {};

$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'},
];

});

And update the HTML accordingly

   <div ng-controller="midiCtrl" id="midi-ctrl">
        [...]

            <tr ng-repeat="plugin in plugins">
                <td><strong>{{plugin.name}}</strong></td>
                <td>
                   <select class="span1" ng-model="selected.channel" ng-options="item.ID as item.Title for item in channels">
                </td>
                <td>
                    <select class="span2" ng-model="selected.device" ng-options="item.ID as item.Title for item in devices">
                </td>
            </tr>

    [...]
</div>