My code:
<div class="form-group">
<label>Productgroup</label>
<select id="product_group_id" name="product_group_id" class="form-control" ng-model="productGroup" ng-change="changedType(val)">
<option style="display: none" value="">Choose a productgroup</option>
@foreach ($product_groups as $product_group)
<option value="{{$product_group->id}}">{{$product_group->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label>Product</label>
<select id="product_id" name="product_id" class="form-control" ng-model="form.product_id">
<option style="display: none" value="">Choose a product</option>
<option value="@{{product.id}}" ng-repeat="product in products">@{{product.name}}<option>
</select>
</div>
The product group select basically filters the next select; products.
I keep getting this empty option value included at the bottom of my product select options, like so:
<option value=""></option>
I've already used <option style="display: none" value="">Choose product</option>
to remove the first empty option value in my product select.
Update:
Use ng-options instead of ng-repeat, like so:
<div class="form-group">
<label>Product</label>
<select id="product_id" name="product_id" class="form-control" ng-options="product.id as product.name for product in products" ng-model="form.product_id">
<option style="display: none" value="">Choose a product</option>
</select>
</div>
i would say your ng-repeat is in the wrong place, probably should use the standard angular way (https://docs.angularjs.org/api/ng/directive/select):
<select name="mySelect" id="mySelect" ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption"></select>
then if you want to remove the empty/first element, have a look at this Angular JS Remove Blank option from Select Option