How to preselect a default object using Ember.select - ember.js

Question

and I'm currently using Ember.select for a drop down menu, and while there's a default value showing, the object does't appear to actually be selected. When IO render the page, the modal open up but the value for selected_funding_instrument is undefined until I click on the drop down menu. Any tips?
debit-customer-modal.hbs:
<div {{bindAttr class=":control-group model.validationErrors.source_uri:error"}}>
<label class="control-label">Account number</label>
<div class="controls">
{{view Ember.Select
contentBinding="customer.debitable_funding_instruments"
valueBinding="model.source_uri"
optionValuePath="content.uri"
optionLabelPath="content.description_with_type"
class="span8"
}}
</div>
</div>
<div class="control-group">
<label class="control-label">Account holder's name</label>
<div class="controls">
<span class="label1a">{{selected_funding_instrument.name}}</span>
</div>
</div>
debit_customer_modal.js
require('app/components/modal');
Balanced.DebitCustomerModalComponent = Balanced.ModalComponent.extend({
submitAction: 'submitDebitCustomer',
dollar_amount: null,
actions: {
open: function() {
var fundingInstruments = this.get('customer.debitable_funding_instruments');
var debitUri = (fundingInstruments && fundingInstruments.length > 0) ? fundingInstruments[0].get('debits_uri') : null;
var debit = Balanced.Debit.create({
uri: debitUri,
amount: null,
order: this.get('order.href')
});
this.set('dollar_amount', null);
var selfie = this.get('selected_funding_instrument');
this._super(debit);
},
save: function() {
if (this.get('model.isSaving')) {
return;
}
var debit = this.get('model');
var selfie = this.get('selected_funding_instrument');
if (selfie) {
debit.set('uri', selfie.get('debits_uri'));
}
var cents = null;
try {
cents = Balanced.Utils.dollarsToCents(this.get('dollar_amount'));
} catch (error) {
debit.set('validationErrors', {
'amount': error
});
return;
}
debit.set('amount', cents);
this._super(debit);
}
},
selected_funding_instrument: function() {
var sourceUri = this.get('model.source_uri');
if (sourceUri) {
return this.get('customer.debitable_funding_instruments').find(function(fundingInstrument) {
return sourceUri === fundingInstrument.get('uri');
});
}
}.property('model.source_uri', 'customer.debitable_funding_instruments'),
can_debit: function() {
return this.get('customer.debitable_funding_instruments.length') > 0;
}.property('customer.debitable_funding_instruments')
});

Answer 1

You need to fire up selected_funding_instrument
Balanced.DebitCustomerModalComponent = Balanced.ModalComponent.extend({
init: function () {
this.selected_funding_instrument();
return this._super();
}
}):
It would be nice if you can create fiddle.