Can't get option value when using Angularjs - angularjs

Question

I have the following AngularJS code:
angular.module('loggedInApp', ['ui.bootstrap']);
var myapp = angular.module('loggedInApp', ['ui.bootstrap'])
myapp.controller('AddParentController', function ($scope, addParentService) {
var vm = this;
$scope.addParentService = addParentService;
$scope.setName = function (val) {
addParentService.inputParentName = val;
}
$scope.setEmail = function (val) {
addParentService.inputParentEmail = val;
}
$scope.setCarrier = function (val) {
addParentService.inputParentCarrier = val;
}
$scope.setBirthday = function (val) {
addParentService.inputParentBirthday = val;
}
});
myapp.service('addParentService', function () {
var vm = this;
vm.eventObjs = [];
vm.parent = [];
vm.addParent = function () {
alert(vm.inputParentName);
alert(vm.inputParentBirthday);
alert(vm.inputParentEmail);
alert(vm.inputParentCellPhone);
alert(vm.inputParentCarrier);
vm.parent.push({
name: vm.inputParentName, dob: vm.inputParentBirthday,
cell: vm.inputParentCellPhone, carrier: vm.inputParentCarrier,
email: vm.inputParentEmail, active: true, personId: vm.parent.length + 1
});
vm.inputParentName = '';
vm.inputParentDOB = '';
vm.inputParentCellPhone = '';
vm.inputParentCarrier = 0;
vm.inputParentEmail = '';
vm.active = true;
};
vm.buildEventObject = function (titleValue, startValue, personId, choreIdValue) {
vm.eventObjs.push({ title: titleValue, start: startValue, familymemberpersonid: personId, choreId: choreIdValue });
return vm.eventObjs;
}
vm.returnEventObject = function () {
return vm.eventObjs;
}
});
My HTML looks like this:
<div class="row clearfix" ng-controller="AddParentController as parent">
<div class="col-md-6 column">
<form role="form" ng-submit="addParentService.addParent()">
<div class="form-group">
<label for="inputParentName">Name</label><input class="form-control" id="inputParentName" value="" type="text" ng-model="addParentService.inputParentName" />
</div>
<div class="form-group">
<label for="inputParentBirthday">Birthday</label><input class="form-control" id="inputParentBirthday" value="" type="text" ng-model="addParentService.inputParentBirthday" />
</div>
<div class="form-group">
<label for="inputParentCellPhone">Cell Phone</label><input class="form-control" id="inputParentCellPhone" value="" type="text" ng-model="addParentService.inputParentCellPhone" />
</div>
<div class="form-group">
<label for="inputParentCarrier">Phone Carrier</label><br />
<select class="form-control" id="inputParentCarrier">
<option>ATT</option>
<option>Cricket</option>
<option>Sprint</option>
<option>T-Mobile</option>
<option>Verizon</option>
</select>
</div>
<div class="form-group">
<label for="inputParentEmail">E-Mail Address</label><input class="form-control" id="inputParentEmail" value="" type="email" ng-model="addParentService.inputParentEmail" />
</div>
<button class="btn btn-default" type="submit">Submit</button>
</form>
</div>
<br /><br />
<div class="col-md-6 column">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Parent:
</h3>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Cell #</th>
<th>E-Mail</th>
<th>DOB</th>
</tr>
<tr ng-repeat="parent in addParentService.parent">
<td>{{parent.name}}</td>
<td>{{parent.cell}}</td>
<td>{{parent.email}}</td>
<td>{{parent.dob}}</td>
</tr>
</table>
</div>
<div class="panel-footer">
<button class="btn btn-default" type="submit">Save your Family!</button>
</div>
</div>
</div>
</div>
My issue is when I click the submit button I am calling my service that alerts out all the different values I entered. Everything works except the inputParentCarrier value. When it alerts out it says 'undefined'
Seems like this should be an easy fix, but right now I can't see what is wrong.

Answer 1

You are missing ng-model on your select
<select class="form-control" id="inputParentCarrier" ng-model="addParentService.inputParentCarrier">
<option>ATT</option>
<option>Cricket</option>
<option>Sprint</option>
<option>T-Mobile</option>
<option>Verizon</option>
</select>

Answer 2

You need to add ng-model="addParentService.inputParentCarrier" to your select tag

Answer 3

you need to add model for select element as well, like:
<select ng-model="addParentService.inputParentCarrier" class="form-control" id="inputParentCarrier">
<option>ATT</option>
<option>Cricket</option>
<option>Sprint</option>
<option>T-Mobile</option>
<option>Verizon</option>
</select>

Answer 4

You should bind your ng-model to the select, not the label.
<select class="form-control" id="inputParentCarrier" ng-model="addParentService.inputParentCarrier">
<option>ATT</option>
<option>Cricket</option>
<option>Sprint</option>
<option>T-Mobile</option>
<option>Verizon</option>
</select>

Answer 5

change your select tag to this:
<select class="form-control" id="inputCarrier" ng-model="myService.inputParentCarrier">
<option value="att">ATT</option>
....
<select>