Multi selection drop down in angular not populating

Question

I have a small controller in angular that controls a drop down that populates the second drop down depending on the first selection.

I cant seem to get the drop downs populated with any content from my controller, I get no console errors and see no mistake it would be good to get a second pair of eyes to see if they can spot my mistake.

My controller

// our controller for the form
// =============================================================================
.controller('formController', function($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function() {
        alert('awesome!');
    };

});


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

app.controller('SelectCnrl', function($scope) {

  $scope.user = {bankName: ''};

  $scope.banks = [{
    "name": "Bank A",
    "branches": [{
      "name": "Branch 1",
      "code": "1"
    }, {
      "name": "Branch 2",
      "code": "2"
    }]
  }, {
    "name": "Bank B",
    "branches": [{
      "name": "Branch 3",
      "code": "3"
    }, {
      "name": "Branch 4",
      "code": "4"
    }, {
      "name": "Branch 5",
      "code": "5"
    }]
  }];

});

My HTML

<div ng-app="selection-type">

    <div ng-controller="SelectCnrl">
        <select ng-model="user.bankName" ng-options="bank.name for bank in banks">
        </select>

        <select ng-model="user.branch" ng-if="user.bankName"
                ng-options="branch.code as branch.name for branch in user.bankName.branches">
        </select>

        <!--<br /> <br /><br /><br /><br />-->
        <!--selected bank : {{ user.bankName }} <br />-->
        <!--selected branch : {{ user.branch }}-->
    </div>

</div>


<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.end" class="btn btn-block btn-info">
            Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>
</div>

Works [fine for me](http://jsfiddle.net/our8qskn/), there must be something else causing your issue. Have you got multiple `ng-app` tags? — George, May 26 '17 at 09:17
Hmm in new to angular and am constructing my app using tutorials so i may of used ng-app twice ill check the code. thanks — Beep, May 26 '17 at 09:24
Right, that being the case have a look at [this question](https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) or just don't have two apps and just have one. — George, May 26 '17 at 13:42

XYZ · Answer 1 · 2017-05-26T09:25:58.947

change your code to $scope.user = {bankName: $scope.banks[0] ,branch:'1'};

In the first select the model value will be an object from the $scope.banks array.So initialize $scope.user.bankName with an object from $scope.banks array

 angular.module('selection-type', [])
 .controller('formController', function($scope) {

    // we will store all of our form data in this object
    $scope.formData = {};

    // function to process the form
    $scope.processForm = function() {
        alert('awesome!');
    };

})
.controller('SelectCnrl', function($scope) { 
  $scope.banks = [{
    "name": "Bank A",
    "branches": [{
      "name": "Branch 1",
      "code": "1"
    }, {
      "name": "Branch 2",
      "code": "2"
    }]
  }, {
    "name": "Bank B",
    "branches": [{
      "name": "Branch 3",
      "code": "3"
    }, {
      "name": "Branch 4",
      "code": "4"
    }, {
      "name": "Branch 5",
      "code": "5"
    }]
  }];
  
   $scope.user = {bankName: $scope.banks[0] ,branch:'1'};

  $scope.displayModalValue = function(){
   console.log($scope.user.bankName);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="selection-type">

    <div ng-controller="SelectCnrl">
        <select ng-model="user.bankName" ng-options=" bank.name for bank in banks" ng-change="displayModalValue()">
        </select>

        <select ng-model="user.branch" ng-if="user.bankName"
                ng-options="branch.code as branch.name for branch in user.bankName.branches">
        </select>

        <!--<br /> <br /><br /><br /><br />-->
        <!--selected bank : {{ user.bankName }} <br />-->
        <!--selected branch : {{ user.branch }}-->
    </div>

</div>


<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.end" class="btn btn-block btn-info">
            Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>
</div>

although this works in a sand box i think my app.js files is structured wrong. as @George has stated I have used ng-app twice — Beep, May 26 '17 at 09:44
@Beep Maybe.Your code if working fine in my snippet.As in the snippet only the default value set for the select 1 should be changed — XYZ, May 26 '17 at 10:00
its neat and tidy, ill re-structure my app.js and look into using your updated code — Beep, May 26 '17 at 10:06

Multi selection drop down in angular not populating

1 Answers1