$scope not picking up ng-model value in select element

Question

I'm trying to add a value to a variable receiving it from ng-model.

Here is the HTML:

<div ng-form="amountForm" class="form-group" id="inputField">
    <input value="1" type="number" placeholder="1" ng-model="itemAmount" ng-maxlength="2" required>
</div>
<div ng-form="nameForm" class="form-group">
    <input value="" type="text" placeholder="Name of Item" ng-model="itemName" ng-maxlength="10" required>
</div>
<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.dependentOn}}" ng-selected="currentDependent == item.dependentOn">{{item.name}}</option>
</select>

Here is the Angular ($scope.itemAmount and $scope.itemName works):

$scope.items = [];

$scope.addItem = function () {
    console.log($scope.itemAmount + ", " + $scope.itemName + ", " + $scope.currentDependent);

    $scope.items.push({
        amount: $scope.itemAmount,
        name: $scope.itemName,
        showMe: false,
        dependentOn: $scope.currentDependent
    });
};

Nothing seems to be printing out on the console:

So the only thing is not working is ng-model in the Select. The drop down list is showing the correct values. How do I get the value selected in the drop down list to print in the console?

Note: I have left out the http.post code for clarity.

Answer 1

You should use itemName (or other item property) to track dependency.

<select ng-model="currentDependent">
    <option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
</select>