AngularJS days dropdown does not update when month dropdown changes

Hi guys need help on this. 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. 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();

});
})