EmberJS Populating multiple select elements

I have started (trying to) using EmberJS 2 weeks ago and I'm having an issue with populating multiple dropdown/select elements based on a previous selection.

I currently have 2 models: Institution and Department. Each Institution can contain multiple Departments. The idea is that when an institution is selected on the first select, the controller will populate the second select element with the departments that belong to that department.

On the template filterer.hbs I have the {{ember-selectize}} components with an action defined so that when an item is selected the action will run on the filterer controller.

The action on the first component is called institutionSelected and it runs fine, but I have no idea on how to populate the second dropdown from inside that running action.

I'm loosing my hair (more like my head) on this one and I hope anyone could help me out.

Thanks a lot.

Filterer.hbs

<div class="form-group">
            <label for="institutions">Institution</label>
            {{ember-selectize
            classNames="select-institution"
            select-item="institutionSelected"
            content=institutions
            optionValuePath="content.id"
            optionLabelPath="content.name"
            selection=selectedInstitution
            placeholder="Select an institution"}}
</div>
            <div class="form-group">
                <label for="departments">Department</label>
                {{ember-selectize
                classNames="select-departments"
                content=departments
                select-item="departmentSelected"
                disabled=true
                optionValuePath="content.id"
                optionLabelPath="content.name"
                selection=selectedDepartment
                placeholder="Select a department"}}
            </div>

models/institutions.js

export default DS.Model.extend({

  name: DS.attr('string'),
  departments: DS.hasMany('department', {async: true})

}).reopenClass({

    FIXTURES: [
    {
        id: 1,
        name: 'London',
        departments: [101]
    },
    {
        id: 2,
        name: "Cambridge",
        departments: [104,105,106]
    },

models/department.js

export default DS.Model.extend({
    name: DS.attr('string'),
    institution: DS.belongsTo('institution')

}).reopenClass({
    FIXTURES: [

    {
        id: 101,
        name: 'Dep 1',
        institution: 3
    },
    {
        id: 102,
        name: 'Dep 2',
        institution: 3
    }...

controllers/filterer.js

export default Ember.Controller.extend({

    selectedInstitution: null,

    departments: null,

    institutions: function() {
        return this.store.find('institution');
    }.property(),

    departments: function() {
        return this.store.find('department');
    }.property(),

    actions: {

        // Action when an institution is selected
        institutionSelected: function(el, instID) {

            // institution ID
            console.log('Selected Institution ID ' + instID);

            // institution name
            console.log(el.get('name'));

            // get departments from institution
            var deps = el.get('departments');

            // how many departments in array
            console.log(deps.get('length'));

            // save departments to the controller property to see
            // if the component is observing it..
            this.set('departments', deps);

            // check if the property has been set with the data
            console.log(this.get('departments').get('length'));

            // No idea if I should use the jquery selectize here to try populate the second dropdown or if there is a way to access the component and set the content property like we do in the handlebars template..
            Ember.$('.select-departments').selectize({
                disabled: false,
                options: deps,
                valueField: 'id',
                labelField: 'name'
            });

        },

        // Action to run when a selection in made on the second dropdown
        // which would populate a  third one and so on...
        departmentSelected: function(v, w) {

        }
    }


});