ember-parent-child-select-promise

controllers.application.js

import Ember from 'ember';

const ObjectPromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);

export default Ember.Controller.extend({
  storeInventoryItems: Ember.inject.service(),
  appName: 'Ember Twiddle',
  stores: [
    {id: 1, displayName: 'rob'},
    {id: 2, displayName:'chandler'}
  ],
  selectedStoreIndex: 0,
  selectedInvItemIndex: 0,

  inventoryItems: function() {
    var stores = this.get('stores');
    if (stores.get('length') === 0) {
      return [];
    }
    
    var store = this.get('stores').objectAt(this.get('selectedStoreIndex'));
    var storeId = store.id;

   	var inventoryPromise = this.get('storeInventoryItems')
    	.getInventoryItemsForStore(storeId)
    	.then(function (items) { return { items }; });

    return ObjectPromiseProxy.create({
    	promise: inventoryPromise
    });
  }.property('selectedStoreIndex', 'stores')
});

helpers.is-eq.js

import Ember from 'ember';

export function isEq(params/*, hash*/) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(isEq);

services.store-inventory-items.js

import Ember from 'ember';

export default Ember.Service.extend({
  getInventoryItemsForStore: function(storeId) {
    var that = this;
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.run.later(function () {
         if (storeId === 1) {
           resolve([{id:33, name:'shaw'}]);
         } else if (storeId === 2) {
           resolve([{id:33, name:'kent'}]);
         } else {
           resolve([]);
         }
      }, randomNumberOfMilliseconds());
    });
  }
});
    
function randomNumberOfMilliseconds() {
	return Math.random() * (1000 - 150) + 150; 
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>



      <select onchange={{action (mut selectedStoreIndex) value="target.value"}}>
        {{#each stores as |store index|}}
          <option value={{ index }} selected={{is-eq selectedStoreIndex index}}>
            {{store.displayName}}
          </option>
        {{/each}}
      </select>
      {{#if inventoryItems.isPending}}
      	Loading...
       {{else}}
			<select onchange={{action (mut selectedInvItemIndex) value="target.value"}}>
        {{#each inventoryItems.items as |inventoryItem index|}}
          <option value={{ index }} selected={{is-eq selectedInvItemIndex index}}>
            {{inventoryItem.name}}
          </option>
        {{/each}}
      </select>
      {{/if}}
<br>
<br>
{{outlet}}
<br>
<br>

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}