select ng-change in table

Question

I have been looking for answer for this but cannot find any where.

I have table which has select and date input

<table id="tblCorrAction" class="table table-bordered table-striped table-hover table-condensed">
    <thead>
        <tr style="height: 30px; background-color: #aeccea; color: #555; border: solid 1px #aeccea;">
            <th style="width:18%;">RArea</th>
            <th style="width:37%;">P</th>
            <th style="width:20%;">C</th>
            <th style="width:25%;">CAction</th>
         </tr>
     </thead>
     <tbody>
         <tr ng-repeat="ca in CASelectList">
             <td>{{ca.QT}}</td>
             <td>{{ca.CAPT}}</td>
             <td>
                 <select name="caC_{{ca.QuesID}}" ng-model="item" class="form-control" 
                     ng-selected="ca.Corrected" ng-required="true" 
                     ng-change="GetCorrectedCAData(ca, item)" 
                     ng-options="corr as corr.caText for corr in correctedOption">
                     <option value="">--Select--</option>
                 </select>                                               
             </td>
             <td>
                 <span>
                     <input name="caDate_{{ca.QuesID}}" type="text" datepicker="" 
                     ng-model="ca.caDate"/>
                </span>
            </td>
        </tr>
    </tbody>
</table>

In my controller

$scope.correctedOption = [{ caValue: 1, caText: 'Yes' }, { caValue: 2, caText: 'No' }];

So now what I am trying to do is if use selects yes in select option then user can enter value in datetime input and if if user selects no the entered value should be reset. I tried few things, none of it worked

First :

$scope.GetCorrectedCAData = function (ca, item) {
    if (item.caValue === 2) {
        $scope.ca.caDate = ""
    }
}

this did not work. Error : Cannot set property 'caDate' of undefined
at ChildScope.$scope.GetCorrectedCAData

2nd : Added id to input

<input id="caDate_{{ca.QuesID}}" name="caDate_{{ca.QuesID}}" type="text" datepicker="" 
                     ng-model="ca.caDate"/>
And in controller
if (item.caValue === 2) {
        angular.element(document.querySelector("#caDate_" + ca.QuesID)).val("");
    }
this also did not work. Error:Missing instance data for this datepicker

3rd: looping through CASelectList a splice the row and add the spliced row with empty data for date. I do not want to use this as there can be many many many records.

Datepicker directive

ngControlMod.directive('datepicker', function () {
    return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            $(el).datepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    };
});

Answer 1

The ca in the ng-repeat is not the same ca as in $scope.ca in the controller. When you are doing $scope.ca it means that the controller has a $scope variable called ca on it. Like this,

var Controller = function($scope) {
    $scope.ca = {
        caDate: "some date";
    }
}

You get that Error : Cannot set property 'caDate' of undefined because $scope.ca doesn't exist on the $scope.

If you want to reference the value inside each CASelectList in the ng-repeat (Which I think you want) then you just drop the $scope. in front of ca. So your code will look like this,

var Controller = function($scope) {
    $scope.GetCorrectedCAData = function (ca, item) {
        if (item.caValue === 2) {
            ca.caDate = ""; // This will change the ca value of the certain ca in CASelectList
        }
    }
}