Year value is not showing in angularjs - 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>

Answer 2

Here is the solution that I have applied to the scenario -
And here is the controller code with few changes : -
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();
var addYears = function () {
var d = new Date();
var year = d.getFullYear();
$scope.page.yearList = [];
var i = 0;
for (i = 0; i < 40; i++) {
$scope.page.yearList.push(year.toString());
year++;
}
}
addYears();
$scope.years = $scope.page.yearList;
$scope.page.expyear = d.getFullYear();
$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);
Here is the view code :-
<!DOCTYPE html>
<html><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<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>
Hope, this will help to others.