While there are a few questions and answers on this topic, I have yet to find a solution that works for my specific case.
Imagine having an object like this:
$scope.person = {name: 'Peter', category1: null, category2: null};
Another variable receives a list of categories through a $resource call with results like this:
$scope.categories = [{id:1, name:'Supplier'}, {id:2, name:'Customer'}];
It's simple enough to create a select dropdown using ng-options to choose from the available categories and set the selected category.id as person.category1 or person.category2.
However, the challenge lies in making category1 mandatory while allowing category2 to remain a valid null value.
Essentially, what I need now is two select dropdowns with the following options:
//Select1
- Select Category1 (disabled)
- Customer (value: 1)
- Supplier (value: 2)
//Select2
- Select Category2 (disabled)
- No Category (value: null)
- Customer (value: 1)
- Supplier (value: 2)
EDIT
I have added a Plunkr based on @Mistalis answer, demonstrating the desired outcome: Each select dropdown should have a disabled placeholder option, with one supporting a "valid null option".