Set default value in select when the ng-model is null

Question

I'm new to angular and i'm trying to set a default state to select when my ng-model is null. Basically I want to set it to 'None' if the model is empty. I tried the below code but it's not working.

<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

Answer 1

Try this:

<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
    <option value="none">None</option>
    <option value="manual">Manual</option>
    <option value="auto">Auto</option>                      
</select>

That said, per the docs, this is probably a misuse of ngInit. The proper way to do this would be to initialize your model with sane values in the controller (or service, if that's where it came from).

Answer 2

H i ,

My thoughts are it is best to do this in the app rather than the template.

  if(typeof $scope.item.carType==="undefined") {
     $scope.item.carType="none";
  }

or simply setting the value

$scope.item.carType="none";

before it is updated with whatever you are using to set the value : -

$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();