title: AngularJS move scrollbar on keydown
body: <p>I am making an autocomplete using angularJS. I am having an issue with the scrollbar. As you can see in <a href="https://i.stack.imgur.com/Fucke.gif" rel="nofollow noreferrer">this gif</a>, 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?</p>
  
  <p>Here is my css code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>Try this <a href="https://codepen.io/dhrubomoy/pen/LywEgG" rel="nofollow noreferrer">codepen</a></p>