AngularJS move scrollbar on keydown

I am making an autocomplete using angularJS. I am having an issue with the scrollbar. As you can see in this gif, the scrollbar stays still when I am pressing arrow down/up. As I am pressing the arrow down key, how do I move the scrollbar with the highlighted option?

Here is my css code:

input {
  width: 300px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 306px;
}
li {
  border: 1px solid grey;  
}
.countries {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
.countryIndex {
  background-color: #B2D7FE;
}

Try this codepen