Angular JS: unable to set value for ng-model variable inside ng-repeat

• I have below code that works fine. That is, it displays dropdowns with country names in it, and when I select a country in the combo box, it prints "Filter data:

    

      <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click=""><i class="glyphicon glyphicon-globe"></i>&nbsp;Country</button>
          <select class="form-control" style="width:200px;" ng-model="filters" ng-options="country.name for country in countries"></select>
      </span>
  
      Filter Data: {{filters}}
  
  </div>
  
        
  
          
          
          
        
  
      

  In the above code, I have declared a scope variable with ng-init = "filters" (not through a controller) and I am trying to set the selected combo to that variable. It worked fine.

• Then I replaced the above code with the following ng-repeat code:

    

      <span ng-repeat="filter in filterList">
          <button type="button" class="btn btn-default" style="width:75px" ng-click="">{{filter.filterLabel}}</button>
  
          <span ng-switch="filter.filterType">
              <span ng-switch-when="combo"><select class="form-control" style="width:200px" ng-model="filters" ng-options="country.name for country in filter.countryData"></select></span>
          </span>
      </span>
  
      Filter Data: {{filters}}
  
  </div>
  
        
  
          
          
          
        
  
      

  The above code displays the country names in the dropdown list, when I select a country, it doesn't display anything next to "Filter Data". I thought maybe the scope variable "filters" is not visible next to the ng-repeat (just a guess) and hence also tried, which didn't work either.

Questions:

• Can you help me understand why ng-model = "filters" doesn't set the variable "filters" and let me print it?

• I would also like to dynamically create a variable name in the ng model. Something like ng-model = "filters. {{Filter.filterType}}". I tried but got no results. It was not displaying {{filters}}. After going through a few posts on Stackoverlow, I tried ng-model = "filters. [Filter.filterLabel]". This is actually through some JS errors (saying TypeError: Cannot set property "Country" to undefined) when I selected an item in the country command. It seems that he could not find the country (which is the result of filters [filter.filterLabel]) inside the filters. So it is obvious that there is something wrong with the way I am declaring the ng model.

With the above code (where I want to use the scope variable ng-init = "filters"), can you please help me in the correct way to dynamically generate ng model variable names for the selected item and be able to use {{filters}}

UPDATE:

Here is a fiddle to demonstrate my problem: http://jsfiddle.net/ramarajuv/ag2crnk7/ Please help me by fixing it.

Thanks everyone in advance.