When you have a multiple select option, the selected items will be stored in an array of objects.
This code snippet demonstrates how to store the selected data from a dropdown menu into the variable regNewStudent as an array of objects under the key ethnic. You can view and test the functionality on this plunker link
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74151a13011815065a1e0734455a415a0c">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<select ng-model="vm.newStudent.ethnicity" placeholder="Ethnicity" aria-label="Ethnicity" ng-model-options="{trackBy: '$value.code'}" multiple ng-options="opt as opt.name for opt in vm.listofEthnicity">
</select>
{{vm.newStudent.ethnicity}}
<button ng-click="vm.save()">Save</button>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
var regNewStudent = {
ethnic: ''
};
vm.listofEthnicity = [
{ "code": 111, "name": "New Zealand European/Pākehā" },
{ "code": 121, "name": "British / Irish" },
{ "code": 122, "name": "Dutch" },
{ "code": 123, "name": "Greek" }
];
vm.save = function() {
regNewStudent = {
ethnic: vm.newStudent.ethnicity,
};
// Since the postToApi factory is not available, I am just logging the data.
console.log(regNewStudent);
//postToApi.push(regNewStudent); //uncomment on your code.
};
});