Angularjs - Access the value of dropdown in a nested ng-repeat

Question

I'm can't access the value of the select in the controller when the select is inside an ng-repeat.

Here is the sample of Html (Everything display properly):

<tr ng-repeat="reservationItem in dataList">
    <select ng-model="detail" ng-change= "haha($index)" ng-options="n for n in [1,2,3,42]" >
        <option value="Choose"> Choose </options>
    </select> 
</tr>

``

In the controller, inside the function haha() I try to get the value of the selected dropdown: $scope.haha = function(index){ console.log(index); console.log($scope.detail); } $scope.haha = function(index){ console.log(index); console.log($scope.detail); }

The first console.log always show 0 The second console.log always shows undefined

Can someone tell me how to access the value of a select inside a nested from a controller. ? Thanks

Answer 1

In this case, you have multiple detail ng-model. This confuses the angular, look at ng-model like an ID. you can't have duplicate. You would need to pull the select out, or attached detail to reservationItem ie. reservationItem.detail

Also, you won't need ng-change as angular autobinds that value to the model.