Angularjs select elements from list and display in textarea - arrays

Question

I have a problem with Angular and nya-select.
Example array in my angular controller:
vm.arrayCollection = [
{ name: 'Alice', mail: 'Class A' },
{ name: 'Bob', mail: 'Class B1' },
{ name: 'Carl', mail: 'Class A2' },
{ name: 'Daniel', mail: 'Class B2' },
{ name: 'Emi', mail: 'Class A3' },
{ name: 'Flank', mail: 'Class B3' },
{ name: 'George', mail: 'Class C4' },
{ name: 'Harry', mail: 'Class C5' }
];
I have select option element:
<ol class = "nya-bs-select" ng-model = "myModel">
<li nya-bs-option="person in myController.arrayCollection">
<a>
{{ person.name }}
</a>
</li>
</ol>
And second one is "textarea" :
<textarea ng-model="myModel2">
... ?
</textarea >
I would like to achieve this :
When I change "myModel" by choosing another person name from the first select option -> I want to set appropiate "mail" in the textarea.
Ex. when I choose "Alice" -> I would like to display "Class A" in the textarea. Moreover, when I multiselect "Alice", "Bob" -> I would like to display "Class A, Class B1"
Could you be so kind and help me How to achieve this ? (Multiselect is done by "nya-select" plugin -> so this is ok. I do not know how to display "mail" value from arrayCollection on the basis of name...

Answer 1

I am not familiar with the plugin you are using, however, I have tried to achieve what you wanted using multiple attribute of select element.
<select multiple="multiple" ng-model="selectedValues">
<option ng-repeat="mail in a" value="{{mail.name}}">{{mail.mail}}</option>
</select>
<textarea>{{selectedValues}}</textarea>
Please review the plunker at "http://plnkr.co/edit/u2sXnMkYSEYshAcLgyn7?p=preview"

Answer 2

Answer updated as per the comments below. OP is asking for a generic element to be reused on the page. There are possibly other/easier ways to do this, but I am extending the previous answer.
Set value attribute in each list element to person (this is needed for regular multi-select list, although may not be needed for nya-select):
<li nya-bs-option="person in myController.arrayCollection" value="{{person}}">
The ng-model myModel in the ordered list should contain the selections. We'll use that to render the content in the textarea. Add the following directive to the application:
myApp.directive('txtArea', function() {
return {
restrict: 'E',
replace: 'true',
scope: {data: '=', property: '#'},
template: "<textarea readonly>{{result()}}</textarea>",
link: function(scope, elem, attrs) {
scope.result = function() {
var ret = "";
angular.forEach(scope.data, function(value, key) {
var suff = (key === scope.data.length - 1) ? '' : ', ';
ret += JSON.parse(value)[scope.property] + suff;
});
return ret;
}
}
};
});
The directive is generic and can be reused across controllers. This also adds a comma after each intermediary value. Now replace the textarea element with:
<txt-area data="myModel" property="mail"></txt-area>
myModel is the model bound to the ordered list and mail is the property to use in the directive/filter.
Working jsfiddle with regular multi-select list.
Latest updated jsfiddle based on discussion below.