Emberjs selected option change not detected

I have an app that needs to create filters which are saved as segment. The filters have sub fields that are displayed dependent on the model selected from the dropdown list. This works fine until I click the add-more + button and select a different model from the dropdown, so that if for example in the first dropdown I selected attributes model and then click the add-more button and now select event model from the dropdown, the dependent fields for the event model are not displayed instead it will continue to display the fields of the attributes model.

Click on this jsbin to see the problem occur as you click the + button and change the model in the dropdown. You will see that the dependent fields did not change.

This is the component for display the dropdown to select a model:

App.SegmentDisplayComponent = Ember.Component.extend({
  selectedSegment: null,

  segments: ['attributes', 'events', 'page_view'],

  isSegmentAttribute: function(){
    var a = this.get('selectedSegment');
    var b = (a  == 'attributes');
    return b;
  }.property('segments.@each','segments.length', 'selectedSegment'),

  isSegmentEvent: function(){
   var a = this.get('selectedSegment');
   var b = (a  == 'events');
   return b;
  }.property('segments.@each','segments.length', 'selectedSegment'),

  actions: {
    save: function(model){
     this.sendAction('action', model);
    },

    addMore: function(){
     var jj = Ember.$('.segment');
     var kk = Ember.$('.segment-data');
     return kk.last().clone(true).appendTo(jj);
    },

    removeField: function(){
     var bb = Ember.$('.segment-data');
     if (bb.length > 1) {
       return bb.last().remove();
     }
    }
 },  

});

This is the template to display dependent fields if the user model is selected from the dropdown:

App.AttributeDisplayComponent = Ember.Component.extend({
  lookupType: ["greather_than", "less_than", "equals"],

  attributes: ['created_at', 'customer', 'active', 'paid']

});

This the emberjs partial for displaying the dropdown to select models

<script type="text/x-handlebars" id="_segmentSelection">
{{view 'select' content=segments
   value=selectedSegment
   selection=selectedSegment
}}
</script>

This display the filters to select the models as well as display nested components to display dependent fields

<script type="text/x-handlebars" id="components/segment-display">

  Filter users by:

  <form>
  <div class="segment">
    <div class="segment-data">
      <button {{action 'removeField'}}> - </button>
       {{partial 'segmentSelection'}} 

       {{attribute-display   isSegmentAttribute=isSegmentAttribute  action="save"}}

       {{event-display isSegmentEvent=isSegmentEvent}}
     <br>
     </div>
   </div>
   <button type="submit"> Save </button>
    <br>

    <button {{action 'addMore'}}> + </button>

   </form>

  </script>

Any suggestions will be helpful.