angular.js:12520 TypeError: Cannot read property 'option1' of undefined at r.$scope.insertvalue

Question

I working on a project called gold loan management system.In which i want to insert the customers ornament's list and it's weight,Insertion is done by using http.post(),I want to insert more than one ornament, so i used a for loop.I can insert the values into the database ,but showing the following error message.

Ornament insertion

index.html

<form  class="form-inline form-group">
   <fieldset  data-ng-repeat="choice in    choices">
      <div class="col-xs-3">
         <div class="form-group">
            <select  class="form-control"    id="optioin1"  ng- model="choice.option1" >
               <option value="Ring"   >Ring</option>
               <option value="Earings" >Earings</option>
               <option value="Chains">Chains</option>
               <option value="Necklaces">Necklaces</option>
               <option value="Bangles">Bangles</option>
            </select>
         </div>
         {{choice.option1}}
      </div>
      <div class="col-xs-4">
         <div class="input-group">
            <input type="number" step="0.01" ng-model="choice.weight" class="form-control" placeholder="Weight" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2">gm</span>
         </div>
      </div>
      <div class="col-xs-4 pull-right">
         <button class="btn btn-default" ng-show="$last"  ng-click="removeChoice() "><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
         <button class="btn btn-default"  ng-show="$last" ng-click="addNewChoice()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
      </div>
   </fieldset>
</form>

dashboard.js

app.controller('dashboardCtrl', function($scope,$rootScope,$http) {
    $scope.date = new Date();
    $scope.place='Kovilloor';
    $scope.choices = [{id: 'choice1'}];
    $scope.addNewChoice = function() {
        var newItemNo = $scope.choices.length+1;
        $scope.choices.push({'id':'choice'+newItemNo});
    };    
};
$scope.insertvalue = function(){
    var gl=($scope.GLID.GLID-0);
    $scope.gli=gl+1;
    for(var i=0;i<=$scope.choices.length;i++){
        $http.post("php/insertornament.php",   {'GLID':$scope.gli,'ORNAMENT':$scope.choices[i].option1,//Error
            'WEIGHT':$scope. choices[i].weight
        })
    }
}; 

Answer 1

Looks like it should be less-than rather than less-than-or-equal-to :

Change:

for(var i=0;i<=$scope.choices.length;i++){

To:

for(var i=0; i < $scope.choices.length; i++){

The offended part is this:

'ORNAMENT':$scope.choices[i].option1

because i will become out of bounds and so $scope.choices[i] will therefore be undefined: