Second dropdown not calling EveryTime Based on First drop down

Question

I have two drop down list using ember.

I have facing issue if change first drop down value not calling every time second dropdown values .

Here I have added my complete code .

please tell me what i did wrong this code

 <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>

        {{outlet}}
    </script>

<script type="text/x-handlebars" data-template-name="index">


    <div>
        {{view  "select"  content=model    prompt="Please select a name"  selectionBinding="controllers.comboBox.model"  optionValuePath="content.title" optionLabelPath="content.body"  }}
    </div>
    {{input type="hidden" value=controllers.comboBox.model.title id="comboval"}}

    <div>
      {{view  "select"   content=model1    prompt="Please select a name"  optionValuePath="content.title"  optionLabelPath="content.title" }}
    </div>

    <p>
        Selected: {{controllers.comboBox.model.title}}
    </p>
</script>

app.js

App = Ember.Application.create({

});

App.Router.map(function () {

});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return posts;
    }
});

App.IndexController = Em.ArrayController.extend({
    needs: ["comboBox"],
    sendValueToServer: function () {       
        document.getElementById("comboval").value = this.get("controllers.comboBox.model.title");
    }.observes("controllers.comboBox.model"),


    model1: function () {   

        var valueq = this.get('controllers.comboBox.model.title');
        console.log("value "+valueq);      
        return posts1;  
    }.property("controllers.comboBox.model")
});

App.ComboBoxController = Em.Controller.extend({
    model: null,
});

App.ComboBox1Controller = Em.Controller.extend({
    model1: null,  
});
posts = [{
    title: "Raja",
    body: "There are lots of à la carte software environments in this world."
}, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
},
{
title: "Broken",
body: "James Coglan wrote a lengthy article about Promises in node.js."
}

];


posts1 = [{
    title: "Raja",
    body: "There are lots of à la carte software environments in this world."
}, {
    title: "Broken Promises",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
},
{
    title: "Broken",
    body: "James Coglan wrote a lengthy article about Promises in node.js."
}

];

Answer 1

Based on the code posted it is assumed that,

1.It is required to save values of each drop down list to a separate property of a controller.

2.When the value of the first drop down list changes then the contents of the second drop down list may change.

http://emberjs.jsbin.com/cuyemileci/1/edit?html,js,output

Added a function that observes the value of the first drop down to set the value of the second controller associated with the value of the second drop down list.

It is important to set values that are present inside the content property used for the drop down list.

js

App.IndexController = Em.ArrayController.extend({
    needs: ["comboBox","comboBox1"],
    sendValueToServer: function () {       
        document.getElementById("comboval").value = this.get("controllers.comboBox.model.title");
    }.observes("controllers.comboBox.model"),


    model1: function () {   

        var valueq = this.get('controllers.comboBox.model.title');
        console.log("value "+valueq);      
        return posts1;  
    }.property("controllers.comboBox.model"),
  setComboBox1Model1:function(){
    var valueq = this.get('controllers.comboBox.model.title');
    var valueFromPosts1 = posts1.findBy("title",valueq);
    this.set("controllers.comboBox1.model1",valueFromPosts1?valueFromPosts1:null);
  }.observes("controllers.comboBox.model")
});

hbs

<div>
      {{view  "select"   content=model1    prompt="Please select a name"  optionValuePath="content.title"  optionLabelPath="content.title" selectionBinding="controllers.comboBox1.model1" }}
    </div>