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, but the console.log for 'filteredContent' returns an array of 0 elements. Any hints where I'm doing something wrong?

district/index.hbs:

<p>{{view "select" content=cities optionValuePath="content.id" optionLabelPath="content.name" selection=selectedCity}}</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);
        this.store.find('city').then(function(cities) {
            controller.set('cities', cities);
        });
    }
});

export default DistrictListRoute;

controller:

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

    selectedCityChanged: function () {
        var selectedCity = this.get('selectedCity');
        console.log(selectedCity);
        var filteredContent = this.get('model').filterBy('city', selectedCity);
        console.log(filteredContent);
    }.observes('selectedCity')
});

model:

export default DS.Model.extend({
  city: DS.belongsTo('city', {async: true}),
  name: DS.attr('string'),
  advert: DS.hasMany('item')
});