AngularJS select with Semantic UI dropdown

Question

I'm working on a this project where I use angular to make dynamic webpages and I use semantic UI for the look and feel.

Everything went very well until I came across this problem: I have 2 dropdown menu's and the options of the second one depends on the selected option of the first one.

<div class="cf">
    <div class="col padh_half col_year">
        <label class="fl">Year</label>
        <select ng-change="changeCountries()" ng-options="year for year in years track by year" ng-model="selectedYear" class="ui search dropdown fluid ">
        </select>
    </div>

    <div class="col padh_half col_year">
        <label class="fl">Country</label>
        <select ng-options="country.value for country in countries | orderBy:'value' track by country.id" ng-model="selectedCountry" class="ui search dropdown fluid ">
        </select>
    </div>
</div>

changeCountries, changes the model countries to the countries for that year. Everything went perfect until I ran this piece:

$(document).ready(function () {
    $('.ui.dropdown').dropdown();
})

When I now try to change the first dropdown, the second one doesnt change with it anymore. Although the function changeCountries gets called. What should I do now?

Answer 1

This did the trick for me! :)

http://angularify.github.io/angular-semantic-ui/