Ember Select component rendering before promise is resolved

I have a component which adds some functionality to a <select> tag. I want to initialise some javascript after the <select> has fully rendered including all <option> tags. The data used to populate the <option> tags is an array of objects provided from an ajax request.

I'm using ember-data and finding this works when the data is provided from the store, meaning it is an instance of DS.RecordArray which has helpful properties like isLoaded. However, when the data is provided from a jQuery ajax call and is just plain JSON, it appears as though the component tries to render everything before the promise returned by jQuery is fulfilled.

I feel the issue is with how I'm handling promises as the issue seems to be related to things initialising before they should (ie promises have resolved properly). I tried wrapping the ajax call in an RSVP.Promise object but not luck, (I'm using Ember-CLI). Below is a simplified version of what I have so far. Any help would be appreciated.

// My route
export default Ember.Route.extend({
    setupController: function(controller, model) {
        this._super(controller, model);

        var hash = Ember.RSVP.hash({
                // myOptions: $.getJSON('/api/options')
                myOptions: new Ember.RSVP.Promise(function(resolve, reject) {
                    Ember.$.ajax({
                        url: '/api/options',
                        type: 'get',
                        dataType: 'json',
                        success: function(result) {
                            Ember.run(null, resolve, result);
                        },
                        error: function(result) {
                            Ember.run(null, reject, result);
                        }
                    });
                })
            });

        return hash.then(function(result) {
            controller.set('optionsForSelect', result.myOptions);
        });
    }
});

// My component
export default Ember.Select.extend({
    didInsertElement: function() {
        // Is called before ajax request has finished
        this.$().mySelectPlugin({
        });
    }
});

// Handlebars template
{{my-select-plugin content=optionsForSelect optionValuPath="content.id" optionLabelPath="content.name"}}