How can I set an ng-model in an ng-repeat equal to an array element?

[Michael Lovell]

I have a number input field on my portal.  When the user selects a value for that number field, an array in the client script has the same corresponding number of elements added.  Then an ng-repeat displays an sp-date-picker for each element in the array.  If I set the ng-model equal to the corresponding array element using $index, the value is not stored in the array.  If I set the ng-model to a non array variable, and push that variable value to an array, the value is captured, but the user sees the same date value on each date picker in the portal.  How can I save the dynamic number of date picker values in the ng-repeat, or where am I perhaps ?  I have pasted my code below.  The result from my alert() calls show that the corresponding index number is accurate, but the value for c.leaveDates.toString() returns 3 empty values as ",,".  Thank you.

html 

 <tr>
<td>
<label>How many days of personal leave in total taking?</label>
</td>
<td>
<input type="number" ng-model="c.numberOfLeaveDates" value="c.numberOfLeaveDates" min="0" step="1" data-number-to-fixed="2" data-number-stepfactor="100" id="numberOfLeaveDates" onchange="addDates(value)">

<button ng-click="c.addDates(c.numberOfLeaveDates)">
Enter Leave Dates
</button>
</td>
</tr>
<tr ng-repeat="day in c.leaveDays">
<td>
<sp-date-picker id="Id" field="Id" ng-model="c.leaveDates[$index]" sn-change="saveLeaveDate($index)"></sp-date-picker>
</td>
</tr><tr>
<td>
<label>How many days of personal leave in total taking?</label>
</td>
<td>
<input type="number" ng-model="c.numberOfLeaveDates" value="c.numberOfLeaveDates" min="0" step="1" data-number-to-fixed="2" data-number-stepfactor="100" id="numberOfLeaveDates" onchange="addDates(value)">

<button ng-click="c.addDates(c.numberOfLeaveDates)">
Enter Leave Dates
</button>
</td>
</tr>
<tr ng-repeat="day in c.leaveDays">
<td>
<sp-date-picker id="Id" field="Id" ng-model="c.leaveDates[$index]" sn-change="saveLeaveDate($index)"></sp-date-picker>
</td>
</tr>

Client script:

$scope.saveLeaveDate = function(value){
//alert(value);
// alert($scope.c.leaveDates.toString());
 }

previousDates = c.data.leaveDates;
//leaveDates.push(c.data.leaveDate);
//alert(leaveDates.toString());
}

c.addDates = function(leaveValue){
c.leaveDays = [];
for(i = 0; i < leaveValue; ++i){
$scope.c.leaveDays.push(i);
$scope.c.leaveDates.push('');
}

c.numberOfLeaveDates = leaveValue;
}

}

[Michael Lovell · Accepted solution]

The issue has been resolved.  Rather than use an array element as the ng-model, I used an array of objects with a property called date and used the corresponding element object property as the ng-model.  Here is the code in case anyone else finds it useful.

html:

<tr>
   <td>
      <label>How many days of personal leave in total taking?</label>
   </td>
   <td>
      <input type="number"
         ng-model="c.numberOfLeaveDates"
         value="c.numberOfLeaveDates"
         min="0"
         step="1"
         data-number-to-fixed="2"
         data-number-stepfactor="100"
         id="numberOfLeaveDates"
         onchange="addDates(value)">

      <button ng-click="c.addDates(c.numberOfLeaveDates)">
         Enter Leave Dates
      </button>
   </td>
</tr>

<tr ng-repeat="element in c.leaveDates track by $index">
   <td>
      <sp-date-picker id="$index"
         field="$index"
         ng-model="c.leaveDates[$index].date"
         sn-change="saveLeaveDate($index)">
      </sp-date-picker>
   </td>
</tr>

client script:

c.addDates = function(leaveValue){
   for(i = 0; i < leaveValue; ++i){
      $scope.c.leaveDates.push({
         date: ''
      });
   }
}