JSFiddle - React, Tailwind, and code Playground
HTML
<div data-ng-app data-ng-controller="alphabetCtrl">
<input type="button" value="Add letter" data-ng-click="addLetter()"/>
<div data-ng-repeat="item in created">
<select data-ng-model="item.model" ng-init="item.model=allLetters[0]" ng-options="value for value in allLetters">
</select>
<input type="button" value="x" data-ng-click="removeItem($index);" />
</div>
<div data-ng-repeat="item in created" ng-init="item.combionations = getCombinations(item)">
<span style="display: none;">
{{item.combionations = getCombinations(item)}}
</span>
<div ng-repeat="combination in item.combionations">
{{combination}}
</div>
<hr/>
</div>
</div>
JavaScript
function alphabetCtrl($scope) {
$scope.created = [];
$scope.allLetters = ["aleph", "bet", "gimel", "daleth", "he", "vav", "zayin", "chet", "teth", "iod", "kaph", "lamed", "mem", "nun", "samech", "ayin", "peh", "tzadi", "quph", "resh", "shin", "tav"];
$scope.addLetter = function() {
$scope.created.push({
model: "",
combionations: []
});
}
$scope.removeItem = function (index) {
$scope.created.splice(index, 1);
};
$scope.getCombinations = function(item) {
var result = [];
for(var i = 0 ; i < $scope.allLetters.length ; i++) {
if($scope.allLetters[i] != item.model) {
result.push(item.model + "-" + $scope.allLetters[i]);
}
}
return result;
}
}