Angular on one of the ng models not accessible

Question

I am working with angular and I am having this issue for a few days. When I tried to submit the form the value of my second drop down is null(selectedDocument dropdown). I posted my code a few days back but nobody could help me. That is why I am reposing the code again.

<div  ng-controller="myController">
<form name="myForm" >
    <div>
        <select ng-model="selectedCompany">
            <option value="">-- Select Company --</option>
            <option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
        </select>
    </div>
    <div><input id="Text1" type="text"  ng-model="enteredCustomer"/></div>
    <div>
        <select ng-model="selectedDocument" ng-click="getTypes()">
            <option value="">-- Select Doc type --</option>
            <option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
        </select>
    </div>
    <input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>
</form>

And this is my javascript

<script>
    var myApp = angular.module("myApp", []);

    myApp.service('companiesService', ['$http', '$q', function ($http, $q) {
        var currentSettings = null;

        this.getList = function () {
            var def = $q.defer()
            if (currentSettings) {
                def.resolve(currentSettings);
            } else {
                $http.post('GetCompanies')
                  .then(function (response) {
                      var response = $.parseJSON(response.data)
                      currentSettings = response;
                      def.resolve(currentSettings);
                  });
            }
            return def.promise;
        }
    }]);

    myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) {
        var allSettings = null;
        this.getList = function () {
            var def = $q.defer()
            if (allSettings) {
                def.resolve(allSettings);
            } else {
                $http.post('GetAllCurrentSettings')
                  .then(function (response) {
                      var response = $.parseJSON(response.data)
                      allSettings = response;
                      def.resolve(allSettings);
                  });
            }
            return def.promise;
        }
    }]);

    myApp.service("deleteService", function ($http) {
        this.removeRow = function (recId, compName, custName, docName) {

            $http.post('DeleteRecord', { settingID: recId,companyName: compName,customerName: custName, documentName: docName } )
            .success(function (data, status, headers, config) {
               window.location.reload();
            })
            .error(function (data, status, header, config) {
            });
        }
    });

    myApp.service("setNewRecordService", function ($http) {
        this.setNewRecord = function (compName, custName, docName) {


            $http.post('SetCurrentRecord', { companyName: compName, customerName: custName, documentType: docName })
            .success(function (data, status, headers, config) {


                window.location.reload();
            })
            .error(function (data, status, header, config) {
            });
        }
    });

    myApp.service('getDocTypesService', ['$http', '$q', function ($http, $q) {
        var docSettings = null;
        this.getDocTypes = function (compName, custName) {
            var def = $q.defer()
            if (docSettings) {
                def.resolve(docSettings);
            } else {
                $http.post('GetDocTypes', { companyName: compName, customerName: custName })
                  .then(function (response) {
                      var response = $.parseJSON(response.data)
                      docSettings = response;
                      def.resolve(docSettings);
                  });
            }
            return def.promise;
        }
    }]);





    myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
      function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {

          $scope.currentSettings = '';
          companiesService.getList().then(function (value) {
              $scope.currentSettings = value;

          }),
          $scope.allSettings = '';
          allCurrentSettingsService.getList().then(function (value) {
              $scope.allSettings = value;

          }),
          $scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
              deleteService.removeRow(recId, compName, custName, docName)
          },

          $scope.companyName = '';
          $scope.setNewRecord = function () {
              setNewRecordService.setNewRecord($scope.selectedCompany, $scope.enteredCustomer, $scope.selectedDocument)

          },

          $scope.getTypes = function () {
              getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
                  $scope.docSettings = value
              });
          };
            }
    ]);

Answer 1

Is the dropdown get data or not

if not

i think in getTypes function ,can you try this

$scope.getTypes = function () {
    getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
        $scope.docSettings = value.data;
    });
}

Answer 2

In your controller you have, for example, this:

companiesService.getList().then(function (value) {
  $scope.currentSettings = value;
}),
$scope.allSettings = '';

What's the comma for?

End your call with a ; and with all the others too.

Your first select has the data from that first service call. Then it errors out because of all the comma'd functionality after it. Terminate them correctly, and then when it gets down to settings $scope.docSettings it should be correct.

myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
  function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {

    $scope.currentSettings = '';
    companiesService.getList().then(function (value) {
      $scope.currentSettings = value;
    });

    $scope.allSettings = '';
    allCurrentSettingsService.getList().then(function (value) {
      $scope.allSettings = value;
    });

    $scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
      deleteService.removeRow(recId, compName, custName, docName);
    };

    $scope.companyName = '';
    $scope.setNewRecord = function () {
      setNewRecordService.setNewRecord($scope.selectedCompany, $scope.enteredCustomer, $scope.selectedDocument)
    };

    getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
      $scope.docSettings = value
    });
  }
]);

Something like that, my ES5 is a little rusty, but see if that works. Edited: removed the unnecessry docTypes.

Answer 3

Your might have something something to do with the way angular(and Javascript for that matter) handles scopes.

The short of it is that the problem is that a child scope is breaking the connection to the parent scope(your controller variable). A simple fix is to bind your form variables to an object and refer to them with the dot notation in the view.

You can read up on this in numerous SO answers, for example here: Why don't the AngularJS docs use a dot in the model directive?

Edit

I made a minimal working plunkr that should point you in the right direction, and here is the edited code.

myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
  function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {

      $scope.selections = {company: null, document: null};

      $scope.currentSettings = '';
      companiesService.getList().then(function (value) {
          $scope.currentSettings = value;

      }),
      $scope.allSettings = '';
      allCurrentSettingsService.getList().then(function (value) {
          $scope.allSettings = value;

      }),
      $scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
          deleteService.removeRow(recId, compName, custName, docName)
      },

      $scope.companyName = '';
      $scope.setNewRecord = function () {
          setNewRecordService.setNewRecord($scope.selected.company, $scope.enteredCustomer, $scope.selected.document)

      },

      $scope.getTypes = function () {
          getDocTypesService.getDocTypes($scope.selected.company, $scope.enteredCustomer).then(function (value) {
              $scope.docSettings = value
          });
      };
        }
]);

and html:

<div  ng-controller="myController">
    <form name="myForm" >
    <div>
        <select ng-model="selected.company">
            <option value="">-- Select Company --</option>
            <option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
        </select>
</div>
<div><input id="Text1" type="text"  ng-model="enteredCustomer"/></div>
<div>
    <select ng-model="selected.document" ng-click="getTypes()">
        <option value="">-- Select Doc type --</option>
        <option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
    </select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>