Q:

Binding nested select element does not work in angularjs

I have two select dropdowns, the first being the parent of the second. I am able to successfully bind the parent select back to a 'selected item'.  But I am unable to bind the child select using ng-model back to the selected parent.  I couldn't quite get my example working as I am new to angular but hopefully you get the picture. 

    $scope.model = {};
    $scope.model = {
      categories: [{
        id: 1,
        name: 'Ford',
        subCategory: ['focus', 'ranger', 'F150'],
        filterValue: ''
      }, {
        id: 2,
        name: 'Honda',
        subCategory: ['accord', 'civic', 'pilot'],
        filterValue: ''
      }],
      selectedCategory: {}
    }


    $scope.categoryChange = function() {
      console.dir($scope.selectedCategory);
    }

    $scope.subCategoryChange = function() {
      console.dir($scope.selectedCategory.subCategory);
    }


    var init = function() {
      $scope.model.selectedCategory = $scope.model.categories[0];
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>


    <select ng-model="model.selectedCategory" ng-options="category as category.name for category in model.categories" data-ng-change="categoryChange()"></select>

    <select ng-model="model.selectedCategory.filterValue" data-ng-options="subCategory for subCategory in model.selectedCategory.subCategory" data-ng-change="subCategoryChange()"></select>

A:

For me it's working!
Maybe you forgot to put ng-app & ng-controller
See This --> Sample

