Year value is not showing in angularjs

Question

I'm trying to show the value of year in the view that is HTML, but year values are not showing at all. Although, My other value is showing while the condition is not acivated (like credit card), but when I activate it, year values is not showing, while values are coming from the controller and is shown in the console.

Here is the view code :-

<div class="col-xs-2 innerN" style="width: 14%;">   
                <select ng-disabled="page.creditcard.isDisabled" class="form-control innerN" placeholder="YYYY" name="ccExpYear" ng-model="page.expyear" required style="border-left:none">
                    <option value="XX" selected ng-if="page.creditcard.isDisabled">XX</option>
                    <option ng-repeat="year in page.yearList" value="{{year}}" ng-if="!page.creditcard.isDisabled">{{year}}</option>
                </select>
            </div>

And Here is the controller code :-

$scope.page.monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ];
$scope.page.yearList = [];
var d = new Date();
var year = d.getFullYear();
//$scope.page.yearList.push(year);
$scope.page.expyear = year;
console.log("Pawan2", $scope.page.expyear);
for (var i = 0; i < 21; i++) {
    {
        $scope.page.yearList.push(year + i);
    };
}
$scope.years = $scope.page.yearList;
console.log("YearListPawan", $scope.page.yearList);
$scope.page.expmonth = "01";
$scope.monthList = "01";
// watcher
$scope.$watchGroup(['page.expmonth', 'page.expyear'], function(newValues, oldValues, scope) {
    //MM-YYYY
    if (typeof newValues[1] == "undefined" || typeof newValues[0] == "undefined") scope.authorize.creditCard
        .expirationDate = null;
    else $scope.authorize.creditCard.expirationDate = newValues[1] + "-" + newValues[0];
    console.log("Pawan", $scope.authorize.creditCard.expirationDate)
}, true);

I hope, I'm clear anough to get the answer for this. PS : THnx in advance for help.

Answer 1

You should use ng-value instead of value:-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.page = {};
  $scope.page.monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", ];
  $scope.page.yearList = [];
  var d = new Date();
  var year = d.getFullYear();
  //$scope.page.yearList.push(year);
  $scope.page.expyear = year;
  console.log("Pawan2", $scope.page.expyear);
  for (var i = 0; i < 21; i++) {
    {
      $scope.page.yearList.push(year + i);
    };
  }
  $scope.years = $scope.page.yearList;
  
  $scope.authorize = {creditCard: {expirationDate: 'date'}};
  
  console.log("YearListPawan", $scope.page.yearList);
  $scope.page.expmonth = "01";
  $scope.monthList = "01";
  // watcher
  $scope.$watchGroup(['page.expmonth', 'page.expyear'], function(newValues, oldValues, scope) {
    //MM-YYYY
    if (typeof newValues[1] == "undefined" || typeof newValues[0] == "undefined")
      $scope.authorize.creditCard.expirationDate = null;
    else
      $scope.authorize.creditCard.expirationDate = newValues[1] + "-" + newValues[0];
    console.log("Pawan", $scope.authorize.creditCard.expirationDate)
  }, true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
  <div class="col-xs-2 innerN" style="width: 14%;">
    <select ng-disabled="page.creditcard.isDisabled" class="form-control innerN" placeholder="YYYY" name="ccExpYear" ng-model="page.expyear" required style="border-left:none">
      <option value="XX" selected ng-if="page.creditcard.isDisabled">XX</option>
      <option ng-repeat="year in page.yearList" ng-value="year" ng-if="!page.creditcard.isDisabled">{{year}}</option>
    </select>
  </div>
</div>