Need Help Understanding and Figuring out Data Passing Datalists in AngularJS

Question

I'm fairly new to AngularJS and I'm trying to get data selected from this Datalist option to pass to my javascript function using AngularJS, but I'm getting nothing to come through for my Datalist inputs. I'm listing the option of the object Customer by it's property cust.Name, but I want to pass it's cust.ClientID as a parameter to the AngularJS function call to construct a new System. Instead when an option is selected and a System is trying to be built, the value for an input that contained a Datalist results in a default value of 0 and not the actual cust.ClientID value.

(*Here is an example of my code, edited to remove sensitive details.)

HTML

<div id="systemInfo" ng-controller="HomeController" class="container">
    <form name="systemForm" class="new-system-form  col-md-6">
        <div class="row submit">
            <input type="submit" value="Add New System" 
                ng-disabled="systemName == null
                  || cust == null
                  || freq == null
                  || stage == null
                  || allowOverDueHours == null
                  || fileCheckFrequencyHours == null
                  || overLapDays == null
                  || overLapDaysInterval == null
                  || overLapDaysIntervalWide == null
                  || messageResendIntervalHours == null"
                ng-click="createSystem(systemName, cust.ClientID, freq.Value, stage.StageID, allowOverDueHours, fileCheckFrequencyHours, overLapDays, overLapDaysInterval, overLapDaysIntervalWide, messageResendIntervalHours, isDifferential, compressFilesBeforeMove, runTamperValidation, runAddressParsing, runPC, runCleanReadings, runPPSPostProcessCleanup, runEntityEventValidation)"
                class="btn btn-success" />
        </div>

        <div class="fieldRow row">
            <label for="customer" class="col-form-label">Customer Name</label>
            <input list="customers" ng-model="cust" type="text" name="customer" id="customer" class="form-control">
            <datalist id="customers" name="customers">
                <option ng-repeat="cust in customers" name="customers" value="{{cust.Name}}"></option>
            </datalist>
        </div>
    </form>
</div>

JavaScript

$scope.createSystem = function (name, clientID, frequency, stageID, allowOverDueHours, fileCheckFrequencyHours, overLapDays, overLapDaysInterval, overLapDaysIntervalWide, messageResendIntervalHours, isDifferential, compressFilesBeforeMove, runTamperValidation, runAddressParsing, runPC, runCleanReadings, runPPSPostProcessCleanup, runEntityEventValidation) {
    $http.post('../Data/CreateSystem', {
        name,
        clientID,
        frequency,
        stageID,
        allowOverDueHours,
        fileCheckFrequencyHours,
        overLapDays,
        overLapDaysInterval,
        overLapDaysIntervalWide,
        messageResendIntervalHours,
        isDifferential,
        compressFilesBeforeMove,
        runTamperValidation,
        runAddressParsing,
        runPC,
        runCleanReadings,
        runPPSPostProcessCleanup,
        runEntityEventValidation
    })
        .then(function (d) {
            console.log("system creation successful. new systemid = " + d.data);
            $window.location.href = '../Home/System?systemid=' + d.data;
        });
};

I'm trying to get each option in the datalist to keep its styling, it's styling is linked to a Bootstrap scaffolding for <input> tags. Yet, when the button on the site labeled, "Add New System" is pressed, I get a value of 0 for clientID, when it should read a valid nondefault value.

JSON version of my customers[] object

[
  {
    "ClientID": "-1",
    "Name": "Global Data",
    "CustDBServerName": "NA",
    "CustDBName": "NA",
    "InvstgtDBName": "NA"
  },
  {
    "ClientID": "42",
    "Name": "customer2",
    "CustDBServerName": "server2",
    "CustDBName": "C2",
    "InvstgtDBName": "C2"
  },
  {
    "ClientID": "86",
    "Name": "customer3",
    "CustDBServerName": "server3",
    "CustDBName": "C3",
    "InvstgtDBName": "C3"
  },
  {
    "ClientID": "1145",
    "Name": "customer4",
    "CustDBServerName": "server4",
    "CustDBName": "C4",
    "InvstgtDBName": "C4"
  },
  {
    "ClientID": "1146",
    "Name": "customer5",
    "CustDBServerName": "server5",
    "CustDBName": "C5",
    "InvstgtDBName": "C5"
  },
  {
    "ClientID": "1147",
    "Name": "customer6",
    "CustDBServerName": "server6",
    "CustDBName": "C6",
    "InvstgtDBName": "C6"
  },
  {
    "ClientID": "1148",
    "Name": "customer7",
    "CustDBServerName": "server7",
    "CustDBName": "C7",
    "InvstgtDBName": "C7"
  },
  {
    "ClientID": "1149",
    "Name": "customer8",
    "CustDBServerName": "server8",
    "CustDBName": "C8",
    "InvstgtDBName": "C8"
  },
  {
    "ClientID": "1151",
    "Name": "customer9",
    "CustDBServerName": "server9",
    "CustDBName": "C9",
    "InvstgtDBName": "C9"
  }
]

Answer 1

The value of your option tags, is the name of the customer. I mean value="{{cust.Name}}". And you set that value into the cust variable in the scope. I mean ng-model="cust". Then it's very normal that you don't have a cust.clientID because when you select an option, cust will just be a string. There's no cust.clientID.