Ember.js filter with select helper

I'm trying to achieve the following with Ember-CLI:

After an initial list of items is loaded, the user can select a city from the dropdown to see only those items that are interesting to him/her. In my case that's districts in cities. You can select from a dropdown list a city to see only districts in that city.

Ideally, all should happen without calling an separately (on click).

So far, I've got this:

district/index.hbs:

<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" action=filterByCity}}</p>
{{#each item in filteredContent}}
    <p>{{item.name}} in {{item.city.name}}</p>
{{/each}}

route:

var DistrictListRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('district');
    },

    setupController: function(controller, model) {
        this._super(controller, model);
        controller.set('filteredContent', model);
        this.store.find('city').then(function(cities) {
            controller.set('cities', cities);
        });
    }
});

export default DistrictListRoute;

controller:

export default Ember.Controller.extend({
    filteredContent: [],

    actions: {
        filterByCity: function (filterFn) {
            this.set('filteredContent', this.get('model').filterBy(filterFn));
        }
    }
});