Binding nested select element does not work in angularjs

Question

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>

Hirad Nikoo · Accepted Answer · 2014-12-01 06:25:13Z

1

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

See This --> Sample

answered Dec 1, 2014 at 6:25

Hirad Nikoo

1,63918 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

silvster27 Over a year ago

This wasn't the solution for my real app, but I figured out the root cause of my problem was I had a duplicate $scope object name in my app.

Collectives™ on Stack Overflow

Binding nested select element does not work in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related