AngularJS ng-repeat和ng-options在select中不起作用

Question

I'm trying to get the values from certain $scope in a form using select, but all I get is undefined values, please help me.

ANGULAR JS

In this code, I call agregarMuestra() when submit the form, but the $scope.nuevo_muestra doesn't match anything when using select , only works with input .

.controller('ctrlRegm',function($scope, $state, $http){
    $scope.tipos = [{"tipo":"sangre"}, {"tipo":"heces"}, {"tipo":"orina"}];
    $scope.nuevo_muestra = {};

    $scope.agregarMuestra = function() {
        console.log($scope.nuevo_muestra); //print empty array
        console.log($scope.nuevo_muestra.tipo); //print undefined

        $http.post("/muestra", {
            tipo: $scope.nuevo_muestra.tipo,

        }).success(function(response){
            $scope.muestras.push(response);
            $scope.$apply();  
        });
    };
}

HTML

this doesn't work

<div class="form-group col s12" >
   <select ng-options="t.tipo for t in tipos track by t.tipo" ng-model="nuevo_muestra.tipo">
   </select>
   <label>el tipo es: {{nuevo_muestra.tipo}}</label>
</div>

this either

<div class="form-group input-field col s12" >
   <select ng-model="nuevo_muestra.tipo">
      <option ng-repeat="t in tipos" value="{{t.tipo}}"> {{t.tipo}}
      </option>
   </select>
</div>

but if I use a input , then it DOES WORK, why, why?? :(

<div class="form-group">
   <input type="text" class="form-control" name="tipo" ng-model="nuevo_muestra.tipo">
</div>

Answer 1

It must either be

<select ng-options="t.tipo for t in tipos" ng-model="nuevo_muestra">
</select>

That will replace nuevo_muestra by the selected element of tipos.

or

<select ng-options="t.tipo as t.tipo for t in tipos" ng-model="nuevo_muestra.tipo">
</select>

That will set nuevo_muestra.tipo with the tipo of the selected element of tipos.

This is well described in the documentation .

Also, success() is deprecated for a long time, and $scope.$apply() is completely useless here.