AngularJS: how to get selected option value and send to controller

Question

how to get a value from select (code) and send to controller in angular for is using in the this controller??
My select consumes a web service code:

 <div class="form-group col-xs-12 offset-xs-2 col-md-3" ng-controller="productCtrl">
      <label for="selectProduct">Product</label> <br>
      <select class="form-control" id="product" required data-error="Select a Product!" tabindex="1">
              <option value="" selected >Select a Product!</option>
              <option value="{{product.codigo}}" ng-repeat="product in products">{{product.name}}</option>
      </select>
      <div class="help-block with-errors"></div>
 </div>

Answer 1

You have to use ng-model for this. Just change your select like this

<select class="form-control" id="product" ng-model="selectedProduct" required data-error="Select a Product!" tabindex="1">
    <option value="" selected >Select a Product!</option>
    <option value="{{product.codigo}}" ng-repeat="product in products">{{product.name}}</option>
</select>

Then in your controller you can access its value using

$scope.selectedProduct

For mor info about how the NgModel works you should read the docs

Answer 2

Use ngModel . You may also want to use ngOptions to generate the option tags for you.

For example:

<select ng-model="value" ng-options="option.value as option.label for option in options"></select>

The value will be available on your controller's scope ( $scope.value ). $scope.options should be an array of objects defining your options.