AngularJS: Populate second select-dropdown based on choice of first select-dropdown

Question

I am trying to populate second select-dropdown based on choice of first select-dropdown in angularJS. I don't know why it doesn't update the DOM (UI):

Dropdown 1

<div class="input-field col s12 m4 l4 xl4">
        <select ng-model="selectedMacroProdotti.fdlcatprod.l01CatPrd" name="l02CatPrd" class="validate" required 
            ng-options="item.l01CatPrd as (item.l01CatPrd | uppercase) for item in listCategoriaProdotti"
            ng-change="populateTipoProdottoListino()">
            <!--  -->
        </select> <label>Codice Categoria Prodotto*</label>
        <div role="alert">
                <span class="error" ng-show="ModificaMacroProdotto.l02CatPrd.$error.required"><font color="red">Campo Obbligatorio!</font></span>           
        </div>
    </div>

Dropdown 2

<div class="input-field col s12 m4 l4 xl4">
    <select ng-model="selectedMacroProdotti.fdltprdlis.l39TipPrdLst" name="l02TipPrdLst" class="validate"
            ng-options="item.l39TipPrdLst as (item.l39TipPrdLst | uppercase) for item in listTipoProdottoListinoFiltered">
            </select> <label>Tipo Prodotto Listino</label>
    </div>

In the dropdown 1 when the value changes i invoke with ng-change the function "populateTipoProdottoListino()":

var ctrlMacroProdotti = function(macroProdottiService, $scope, $window, macroProdottiFactory, $uibModal, dateFormatService, listCategoriaProdotti, listTipoProdottoListino, listTipoFrontEndV){`$scope.populateTipoProdottoListino = function(){
        $scope.listTipoProdottoListino = listTipoProdottoListino;
        $scope.listTipoProdottoListinoFiltered = [];
        var currentCatProd = $scope.selectedMacroProdotti.fdlcatprod.l01CatPrd;

        $scope.listTipoProdottoListino.forEach(function(item,index){
            if(item.l39CatPrd === currentCatProd){
                $scope.listTipoProdottoListinoFiltered.push(item);
            }
        })
    }
}

The list listTipoProdottoListinoFiltered is populated with values but nothing happens in the front-end. I used also $scope.$apply() but it doesn't fix my problem.

Can you help me?

Thank you.

Answer 1

I solved the issue. The problem was Angular Materialize (http://materializecss.com/forms.html#select-initialization):

If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether

$('select').material_select('destroy');

My updated code is this :

$scope.populateTipoProdottoListino = function(){
        $scope.listTipoProdottoListinoFiltered = [];
        var currentCatProd = $scope.selectedMacroProdotti.fdlcatprod.l01CatPrd;
        $scope.listTipoProdottoListino.forEach(function(item,index){
            if(item.l39CatPrd === currentCatProd){
                $scope.listTipoProdottoListinoFiltered.push(item);
            }
        });
        setTimeout(() => {
            $('#l02TipPrdLst').material_select('destroy');
            $('#l02TipPrdLst').material_select();
            $scope.$apply();
        }, 10);

    }