JSFiddle - React, Tailwind, and code Playground

by ramarajuv

HTML

<div classs="container" ng-app="app" ng-controller="CountryCtrl">\
    <div>This Works</div>
    <div ng-repeat="filter in filterData" ng-init="filters">{{filter.label}}
        <select style="width:200px;" ng-model="filters" ng-options="country.name for country in filter.data"></select>{{filters}}</div>
    <hr/>
    <div>This doesn't Works</div>
    <div ng-repeat="filter in filterData" ng-init="filters">{{filter.label}}
        <select style="width:200px;" ng-model="filters.[filter.label]" ng-options="country.name for country in filter.data"></select>{{filters}}</div>
</div>

JavaScript

var app = angular.module('app', []);

function CountryCtrl($scope) {
    $scope.filterData = [{
        "label": "Country",
            "data": [{
            "code": "USA",
            "name": "United States"
        }, {
            "code": "UK",
            "name": "United Kingdom"
        }]
    }, {
        "label": "President",
            "data": [{
            "code": "USA",
            "name": "Obama"
        }, {
            "code": "UK",
            "name": "Tony"
        }]
    }];
}