JSFiddle - React, Tailwind, and code Playground

by vinoli

HTML

<div ng-controller="Ctrl">
  <select ng-change="updateMonthList(yearSelected.year)" ng-model="yearSelected" ng-options="item as item.year for item in dataSource track by item.year">
  </select>
  <br>
  <select ng-change="updateSelectedValObj(monthSelected)" ng-model="monthSelected" ng-options="item.name for item in payMonthList">
  </select>
</div>

JavaScript

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

app.controller('Ctrl',function($scope) {       
    $scope.dataSource = [{"year":2015,"month":[{"code":1,"name":"Jan"},{"code":2,"name":"Feb"},{"code":3,"name":"Mar"},{"code":4,"name":"Apr"},{"code":5,"name":"May"},{"code":6,"name":"Jun"},{"code":7,"name":"Jul"}]},{"year":2014,"month":[{"code":1,"name":"Jan"},{"code":2,"name":"Feb"},{"code":3,"name":"Mar"},{"code":4,"name":"Apr"},{"code":5,"name":"May"},{"code":6,"name":"Jun"},{"code":7,"name":"Jul"},{"code":8,"name":"Aug"},{"code":9,"name":"Sep"},{"code":10,"name":"Oct"}]},{"year":2013,"month":[{"code":1,"name":"Jan"},{"code":2,"name":"Feb"},{"code":3,"name":"Mar"},{"code":4,"name":"Apr"},{"code":5,"name":"May"},{"code":6,"name":"Jun"},{"code":7,"name":"Jul"},{"code":8,"name":"Aug"},{"code":9,"name":"Sep"},{"code":10,"name":"Oct"}]},{"year":2012,"month":[{"code":4,"name":"Apr"},{"code":5,"name":"May"},{"code":6,"name":"Jun"},{"code":7,"name":"Jul"},{"code":8,"name":"Aug"}]}]
    
	$scope.yearMonthSelectedObj = {};
  
	$scope.payMonthList = $scope.dataSource[0].month;
	$scope.yearSelected = $scope.dataSource[0];
	$scope.monthSelected = $scope.dataSource[0].month[6];
        
  $scope.updateMonthList = function(year){
  	console.log('chk-111');
    
    $scope.yearMonthSelectedObj.year = year;
    angular.forEach($scope.dataSource, function(value, key) {
      if(value.year==year){
        $scope.payMonthList  = value.month;
        $scope.monthSelected = value.month[0];

        $scope.yearMonthSelectedObj.month = value.month[0].code;
      }
    });
  }
  
  $scope.updateSelectedValObj = function(res){
  	console.log('chk-222');
    if(res!=null){
      $scope.yearMonthSelectedObj.month = res.code;
    }
  }
    
});