Second Dropdown Not Calling Everytime Based On First Drop Down

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 . plea

Solution 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>