Drop down not getting displayed

Question

Problem Question -

I have a two drop down in my view. And second drop down rely on the first one. But somehow second one does not get updated

// my firstdrop down

  <select ng-controller="myController"
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
                <option value="">Please select customer</option>
    </select>

// my second drop down

<select ng-controller="myController"
         ng-options="cc.name for cc in customerCostData">
      <option value="">Please select cost</option>
</select>

// my controller

(function() {
    var myController = function($scope,Service){
        $scope.customerDetailData;
        Service.cust()
            .success(function(data){
                console.log(data)
                $scope.customerDetailData = data;
            })
            .error(function(status,error){

            })

        $scope.customerCostData;
        $scope.updateCost=function(customer){
            Service.cost(customer.id)
                .success(function(cost){
                    $scope.customerCostData= cost
                })
                .error(function(status,data){
                    console.log(status);
                    console.log(data);
                })
        }
    };
    myController .$inject = ['$scope','Service'];
    angular.module('app').controller('myController ',myController );
}());

Is anything i am missing ? the data is coming through fine in the console. Please guide me

Answer 1

There are 2 things to do here:

1. The first and main issue is that you are attaching ng-controller to each select individually. This means it is actually creating 2 separate controllers, one for each select, and so they are given different scopes. You need to apply the ng-controller attribute to a parent element, such as the form.

2. The second issue is that angular will not automatically update an element just because the scope variable is used in ng-options. You therefore need to give it a ng-model so that Angular watches it correctly.

Here is an example of the code with two separate controller instances. Note the 2 alerts:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <form ng-app="myApp">
         <select ng-controller="myController"
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
            <option value="">Please select customer</option>
        </select>

        <select ng-controller="myController"
            ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
            <option value="">Please select cost</option>
        </select>
    </form>

    <script type="text/javascript">
        (function () {
            var myApp = angular.module('myApp', []);

            var myController = function ($scope) {
                alert('myController created');
                $scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];

                
                $scope.updateCost = function (customer) {
                    $scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
                }
            };
            myController.$inject = ['$scope'];
            myApp.controller('myController', myController);
        }());
    </script>

Here it is with the single ng-controller applied to the form and ng-model="customerCostData" on the second select, so it now works:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <form ng-app="myApp" ng-controller="myController">
         <select
             ng-options="customer.name for customer in customerDetailData"  ng-model="customer"
             ng-change="updateCost(customer)">
            <option value="">Please select customer</option>
        </select>

        <select
            ng-options="cc.name for cc in customerCostData" ng-model="customercustomerCostData">
            <option value="">Please select cost</option>
        </select>
    </form>

    <script type="text/javascript">
        (function () {
            var myApp = angular.module('myApp', []);

            var myController = function ($scope) {
                alert('myController created');
                $scope.customerDetailData = [{ id: 1, name: "bob" }, { id: 2, name: "fred" }];

                
                $scope.updateCost = function (customer) {
                    // would be an ajax call
                    $scope.customerCostData = [{ name: customer.id.toString() }, { name: 'x' }];
                }
            };
            myController.$inject = ['$scope'];
            myApp.controller('myController', myController);
        }());
    </script>

Answer 2

is the cost data the result of an Ajax request? if so, you may need to force a force a $digest cycle to let the UI know the model has been changed. You can achieve this by wrapping the assignment of cost in a $timeout, or $apply.

$timeout(function () {
    $scope.customerCostData = cost;
});

or

$scope.$apply(function () {
    $scope.customerCostData = cost;
});