Cross check input check box values against an array in angular - angularjs

Question

I have an array like following in my controller:
$scope.word_pair = [
{'word':'Carla', 'pair':'Lion'},
{'word':'Sophie', 'pair':'Lotta'},
{'word':'Jannes', 'pair':'Stubbi'},
{'word':'Martin', 'pair':'Wolle'},
{'word':'Flo', 'pair':'Ign'},
{'word':'Rere', 'pair':'Rose'},
{'word':'Jean', 'pair':'Tamara'},
{'word':'Memo', 'pair':'Elk'},
{'word':'Nila', 'pair':'Naph'}
]
On my HTML template I have two input lists wherein I am supposed to enter few of the combinations from above array and if the combination is correct then there will be a green checkmark.
My HTML looks like following as of now:
<!-- Level 2 Enter view for words for corresponding pairs -->
<div class="col col-50" ng-if="enterTextViewLeft">enterTextViewLeft
<ion-list>
<ion-item ng-repeat="item in randomWord_pair" id="list_two">
<input placeholder="Type here" ng-model="word" type="text" ng-change="leftPartnerCheck(word,item.pair)">
<div ng-show="showPartner[word]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
</ion-item>
</ion-list>
</div>
<!-- Level 1 Enter view for pairs for corresponding words -->
<div class="col col-50" ng-if="enterTextViewRight">enterTextViewRight
<ion-list>
<ion-item ng-repeat="item in randomWord_pair" id="list_two">
<input placeholder="Type here" ng-model="pair" type="text" ng-change="rightPartnerCheck(pair,item.word)">
<div ng-show="showPartner[pair]" align="right"><i class="ion-checkmark myCheckmark"></i></div>
</ion-item>
</ion-list>
</div>
Screenshot of how it actually looks (this is from level 1 of the game, for level 6 instead of word list in left side, input list will be there too, so basically left and right input list to fill in any combination from above array in any order):
UPDATE:
I have couple of functions as well:
$scope.rightPartnerCheckList = {};
for(var v in $scope.randomWord_pair){
$scope.expectedPairSequece.push($scope.randomWord_pair[v].pair)
$scope.rightPartnerCheckList[$scope.randomWord_pair[v].word] = $scope.randomWord_pair[v].pair;
}
$scope.leftPartnerCheckList = {};
for(var v in $scope.randomWord_pair){
$scope.expectedWordSequece.push($scope.randomWord_pair[v].word)
$scope.leftPartnerCheckList[$scope.randomWord_pair[v].pair] = $scope.randomWord_pair[v].word;
}
$scope.showPartner = {};
$scope.rightPartnerCheck = function(p,i_p){
if($scope.rightPartnerCheckList[i_p] == p){
$scope.showPartner[p] = true;
if($scope.enteredSequence.indexOf(p)==-1){
$scope.enteredSequence.push(p)
}
}
}
$scope.leftPartnerCheck = function(w,i_w){
if($scope.leftPartnerCheckList[i_w] == w){
$scope.showPartner[w] = true;
if($scope.enteredSequence.indexOf(w)==-1){
$scope.enteredSequence.push(w)
}
}
}
How can I implement such a logic (for two input lists and checking for existing combinations in array) or incorporate in my existing logic?

Answer 1

I have created an example of how to do this and I will explain below:
HTML:
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="w in word_pair">
<td> <input type="text" ng-model="guesses[$index]"> </td>
<td> <input type="text" ng-model="otherguesses[$index]"> </div> </td>
<td> <input type="checkbox" ng-checked="check(guesses[$index], otherguesses[$index])" disabled> </td>
</tr>
</table>
</div>
AngularJS:
$scope.word_pair = [
{'word':'Carla', 'pair':'Lion'},
{'word':'Sophie', 'pair':'Lotta'},
{'word':'Jannes', 'pair':'Stubbi'},
{'word':'Martin', 'pair':'Wolle'},
{'word':'Flo', 'pair':'Ign'},
{'word':'Rere', 'pair':'Rose'},
{'word':'Jean', 'pair':'Tamara'},
{'word':'Memo', 'pair':'Elk'},
{'word':'Nila', 'pair':'Naph'}
];
$scope.guesses = [];
$scope.otherguesses = [];
$scope.check = function(word, pair) {
for(var i=0; i<$scope.word_pair.length; i++) {
if($scope.word_pair[i].word == word && $scope.word_pair[i].pair == pair) {
return true;
}
}
}
Use ng-repeat for every object inside the array word_pair
Create inputs and checkbox for each object
Create an arrays ($scope.guesses and $scope.otheruesses) and store the user input there (ng-model="guesses[$index]" and ng-model="otherguesses[$index]")
$index is the current index of ng-repeat which is associated with the index inside word_pair
Check if they match (check(guesses[$index], otherguesses[$index]))
You can check for duplicates inside check if you wish.
CodePen: http://codepen.io/theblindprophet/pen/zBRNmN