JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="MyCtrl">{{availableGroups|json}}
<select ng-model="selectedGroup" ng-options="g.id for g in availableGroups"></select>
</div>
</div>
CSS
div {
white-space: pre;
}
JavaScript
function MyCtrl ($scope) {
$scope.groups = [ {
id: 115,
name: 'Test Group 2',
Description: '',
owner: 10,
OwnerIsUser: false,
} , {
id: 116,
name: 'Test Group 3',
Description: '',
owner: 71,
OwnerIsUser: false,
} , {
id: 117,
name: 'Test Group 4',
Description: '',
owner: 71,
OwnerIsUser: false,
} , {
id: 118,
name: 'Test Group 5',
Description: '',
owner: 115,
OwnerIsUser: false,
} , {
id: 119,
name: 'Test Group 6',
Description: '',
owner: 8,
OwnerIsUser: true,
} ];
$scope.assignedGroups = [{
id: 116,
name: 'Test Group 3',
Description: '',
owner: 71,
OwnerIsUser: false,
} , {
id: 117,
name: 'Test Group 4',
Description: '',
owner: 71,
OwnerIsUser: false,
} , {
id: 118,
name: 'Test Group 5',
Description: '',
owner: 115,
OwnerIsUser: false
}];
$scope.availableGroups = (function () {
var assignedGroupsIds = {};
var groupsIds = {};
var result = [];
$scope.assignedGroups.forEach(function (el, i) {
assignedGroupsIds[el.id] = $scope.assignedGroups[i];
});
$scope.groups.forEach(function (el, i) {
groupsIds[el.id] = $scope.groups[i];
});
for (var i in groupsIds) {
if (!assignedGroupsIds.hasOwnProperty(i)) {
result.push(groupsIds[i]);
}
}
return result;
}());
}