JavaScript/Angular 1 – Scroll when keyboard appears

When I click on an input the keyboard appears but it covers the input.
What I want is when the keyboard appears the scroll page down to let the input appear. The solution I found is to create a directive that listens to the focus event.

Directive :

export const adjustResize = ($window) => {
  'ngInject'
   return {
     restrict: 'A',
     link: (scope, element, attrs) => {
       if ($window.innerWidth <= 768) {
         element.bind('focus', () => {
           element[0].scrollIntoView()
           window.scrollTo(0, 0)
         })
       }
     }
  }

}

HTML input :

<input type="text" class="form-control" ng-model="$ctrl.socialReason" adjust-resize>

it works when I click on an input it is scrolled the page, the problem is that if I click a second time on the input (or on another input near him for example) it scroller the page another time and the input appears more.

is there another solution?

Source: AngularJS