angular: how do I make a dependent required field country->state? - angularjs

Question

I have a field country. Some countries in the list like the US or Canada are divided into states. When such countries are selected, a second select appears and is required.
HTML:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required="">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Controller:
app.controller('CompanyController', function ( $scope, companies , Countries, States ... ) {
//...
$scope.countries = Countries;
$scope.states = [];
$scope.stateAvailable = false;
$scope.$watch( 'companyCriteria.country', function( after, before ) {
if ( searchCompanyCriteria.country && searchCompanyCriteria.country.div ) {
$scope.states = States.get( after.code );
$scope.stateAvailable = true;
} else {
$scope.states = [];
$scope.stateAvailable = false;
}
} );
$scope.search = function () {
if ( !$scope.companyForm.$valid ) return; //Returns when states are hidden
//Do search ...
};
the problem is that $scope.companyForm.$valid is false when the state select is hidden. I'm not sure how to proceed to code it in an angular and elegant way (without having to hack with the dom the jquery way).
Note: Angular v1.2.0-rc.3

Answer 1

Instead of ng-show use ng-if (assuming you're using angular 1.1.5 or higher):
<div class="row" ng-if="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" required>
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
Or, just use ng-required:
<select name="state" ng-model="companyCriteria.state" ng-required="stateAvailable">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>

Answer 2

You can use ng-required to resolve an angular expression and set the field to required:
<label>Country*</label>
<select name="country" class="gu3" ng-model="companyCriteria.country" ng-options="country.label for country in countries" required=""></select>
<div class="row" ng-show="stateAvailable">
<label>Province*</label>
<select name="state" class="gu3" ng-model="companyCriteria.state" ng-required="companyCriteria.country">
<option ng-repeat="state in states" value="{{state.code}}">{{state.label}}</option>
</select>
</div>
This will only require the state, if the country has been set with a value. However, you can put in any scoped expression here (so if you want to call a controller function returning a boolean, that would work as well).
The documentation for ng-required is here.