I am working on DOB validation in AngularJS. However I am facing an issue. Whenever I'm changing the month from the dropdown, the days dropdown won't get updated on the first click of the dropdown. So technically, I have to select first a random number of the days dropdown, only then the number of days will get updated on the second click, depending on the selected month. The days array is updating after the clicking any month in dropdown, but it is not updating the days in days dropdown. Sharing this code snippet. Any advice? Thanks.

$(document).ready(function () {
$('#monthOfBirth').change(function () {

var e = document.getElementById('monthOfBirth');
var monthValue = e.options[e.selectedIndex].value;
var monthLength = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var setNumberOfDays = monthLength[monthValue - 1];
console.log(monthValue, setNumberOfDays);

function populateDays() {
  const days = [];
  for (let i = 1; i <= setNumberOfDays; i += 1) { //
    if (i < 10) {
      days.push({ value: `0${i}`, text: `0${i}` });
    } else {
      days.push({ value: i, text: i });
    }
  }
  return days;
}
function populateMonths() {
  const months = [];
  for (let i = 1; i <= 12; i += 1) {
    if (i < 10) {
      months.push({ value: `0${i}`, text: `0${i}` });
    } else {
      months.push({ value: i, text: i });
    }
  }
  return months;
}
function populateYears() {
  const years = [];
  for (let i = 1950; i <= new Date().getFullYear(); i += 1) {
    years.push({ value: i, text: i });
  }
  return years;
}

$scope.dayOfBirth_items = populateDays();
$scope.monthOfBirth_items = populateMonths();
$scope.yearOfBirth_items = populateYears();

}); })