Develop Reference

Trying to execute the ng-change using semantic UI and angularJS

I am trying to load a dropdown with angularjs and semantic UI with the following code
<div id="state" class="ui search selection dropdown">
<label for="state">Estado</label>
<input type="hidden" name="state">
<i class="dropdown icon"></i>
<div class="default text">Selecione o Estado</div>
<div class="menu" ng-model="state" ng-change="loadCity()">
<div ng-repeat="state in states" class="item" data-value="{{state.ID}}">{{state.NAME}}</div>
</div>
</div>
<div>
But the event is not called.
When I use the code below it works:
<select id="state" class="ui search selection dropdown" ng-model="state" ng-init="loadState()" ng-change="loadCity(state.ID)">
<option ng-repeat="state in states" value="{{state.ID}}">{{state.NAME}}</option>
</select>
What am I doing wrong?

Looks like this is an issue other people have encountered. Take a look at this issue: https://github.com/Semantic-Org/Semantic-UI/issues/1913
I found a way to solve this issue on angular side using some 1.3 magic. It's not the best way of doing this but it works.
It can simply be solved by using the formController and a watch.
I updated the plnkr. Note that i use underscore.js to find the array index of the control inside the form.
The rest is pure angular and some jquery.
http://plnkr.co/edit/eDOej3zJ0bwQ1xyX1LDI?p=preview
Look at the section starting with:
app.directive('select'

Bootstrap Form Helper - Select country dynamically on Country picker

I'm using country picker from Bootstrap form helper:
Country Picker
Problem is that i need to initialize it dynamically with a country. I'm using data-country="US" as default, anyways i need to change it on document ready function.
<div id="country-select" class="bfh-selectbox bfh-countries" data-flags="true" data-value="US">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<input type="text" class="bfh-selectbox-filter">
<div role="listbox">
<ul role="option">
</ul>
</div>
</div>
</div>

From the Example 3, you can use
$(document).ready(function(){
$('#country-select').bfhcountries({country: 'TN'});
});
$('#LoadCountry').click(function(){
$('#countries1').bfhcountries({country: 'TN'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.css" rel="stylesheet"/>
<button id='LoadCountry' class="btn">Load Countries</button>
<br><br>
<select id="countries1" class="form-control"></select>

use the html below to select a default country on initialize. Also add bootstrap-formhelpers.js and bootstrap-formhelpers.css to your html or your select will not be populated with data.
<form><select id="country-select" name="country-select" class="form-control bfh-countries" data-country="US" data-flags="true"></select></form>
and to select a country after initialization,
$('#country-select').val('TN');
see the document for more options on initilization.
Here's a working fiddle.
Per OP's comment The OP is using a theme using select2, quoting from there
Select2 will listen for the change event on the element that it is attached to. When you make any external changes that need to be reflected in Select2 (such as changing the value), you should trigger this event.
and therefore to reflect changes;
$('#country-select').val('TN').trigger('change');

How to use dropdown behaviors using Semantic-UI for Meteor?

I'm using Semantic-UI for Meteor. Let's say I have a dropdown like this:
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
</div>
</div>
And initializing it like this:
Template.DropdownTemplate.onRendered(function() {
this.$('.ui.dropdown').dropdown()
})
But how do I reach the behaviors of that dropdown, which, according to the documentation on the Semantic-UI site, look like this:
$('.your.element')
.dropdown('behavior name', argumentOne, argumentTwo)
;
An example is this clear behavior:
$('.ui.dropdown).dropdown('clear')
This simple behavior doesn't work (nor does any other behavior) in Meteor for some reason. Callbacks work, but not the behaviors.
Does anyone have a workaround for this?

Applying javascript to generated content

Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.

If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.

UI Dropdown Performance Issue with large Select Dropdown

I'm working with Semantic UI dropdowns, and I need to create a dropdown with around 3000 options in it. The dropdown works very well, except for one case. If the user clears out the search text, the dropdown completely locks up. I believe it's because it's trying to reload all the elements.
I've looked through the settings (http://semantic-ui.com/modules/dropdown.html#/settings) that are available for the dropdown, but nothing stands out in change the way it handles reloading all the elements.
Any advice would be greatly appreciated.
HTML:
<div class="ui fluid search selection dropdown">
<input type="hidden" name="security_group"></input>
<i class="dropdown icon"></i>
<div class="default text">Select Security Group</div>
<div class="menu">
<j:while test="${reference.next()}">
<div class="item" data-value="${reference.sys_id}">${reference.u_name}</div>
</j:while>
</div>
</div>
Javascript:
$(document).ready(function(){
$(".ui.fluid.search.selection.dropdown").dropdown();
$(".ui.fluid.search.selection.dropdown").width("100%");
});