Show a list of items inside an ng-repeat when an i

Question

So, I have this ng-repeat which has a model inside subj.Prerequisites, subj.Prerequisites can contain an array e.g ['SUBJ1', 'SUBJ2']. What i wanted to do is when i click on my input text inside this ng-repeat there will be a shown list of subjects below which allow multiple selection and then with the multiple selected items should be binded to the clicked input text.

<div  ng-repeat="subj in sem.subjects track by $index">
   <md-input-container flex class="no-error-spacer uk-margin-remove">
      <label>Prerequisites</label>
        <input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true">
   </md-input-container>
</div>

<select multiple>
 <option ng-repeat="sb in subjects" value="sb.subjectCode>{{ sb.subjectCode }}</option>
</select>

Its kind the hard for me though. Please someone help me. Thank you so much!

Answer 1

As per my understanding of your question. Please look into this working plunker :

    <div ng-repeat="subj in subjects track by $index">
      <label>Prerequisites for {{subj.subjectCode}}</label>
      <input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
  </div>
  <select ng-model="multiPre[selected]" multiple>
    <option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
  </select>

https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview

PS: I have left {{multipre}} intentionally for your understanding of model.

Edit Start :

Try This : https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview

This addressees to your requirement.