angularjs - How can I validate an ng-repeated dropdown category selector? -

i created nested category model. in order select category product, see dropdown main categories. when select one, new dropdown added right child categories 1 selected. repeats until reach last level. when happens $scope.product.category_id set. want invalidate whole set of fields when $scope.product.category_id null.

i've been using angular-bootstrap-show-errors validation , tried mix ui-utils achieve one, using custom function: validate_category().

here's html used:

<span ng-repeat="parent_id in category_dropdown_parents" show-errors="{ skipformgroupcheck: true }">     <select class="form-control" name="category_id"         ng-init="selected_category[$index] = init_select($index);"         ng-model="selected_category[$index]"         ng-options="category.name category in (categories | filter : { parent_id: parent_id } : true ) track category.id "         ng-change="select_category(selected_category[$index], $index)"          ui-validate="'validate_category()'" // added work ui-utils          >     </select>      <span ng-if="$index+1 != category_dropdown_parents.length">/</span> </span> 

and simple validation function:

$scope.validate_category = function() {     return  (   $scope.product.category_id !== null              &&  $scope.product.category_id !== undefined); } 

but not working. ideas?

edit: realized, problem validation function on ui-validate executed after ng-change function, it's never able check $scope.product.category_id update.

your select using

ng-model="selected_category[$index]" 

but validation function using

$scope.product.category_id 

shouldn't using

ui-validate="'validate_category($index)'" 

and

$scope.validate_category = function($index) {     return($scope.selected_category[$index] !== null      && $scope.selected_category[$index] !== undefined); }