Ionic Framework Keyboard hides input field

Question

I am having some issues in a form I am creating. This form:

Answer 1

This is how I solved it:

NOTE: you have to install cordova keyboard plugin (https://github.com/driftyco/ionic-plugin-keyboard)

        var windowHeight = window.innerHeight;

        $scope.$on('$ionicView.loaded', function() {

            // fallback + warning
            var scrollView = {scrollTo: function() { console.log('Could not resolve scroll delegate handle'); }};

            var setupKeyboardEvents = function() {

                $scope.unbindShowKeyboardHandler = $scope.$on('KeyboardWillShowNotification',
                function(info) {

                    var input = angular.element(document.activeElement);
                    var body = angular.element(document.body);
                    var top = input.prop('offsetTop') //+ angular.element(input.prop('offsetParent')).prop('offsetTop');
                    var temp = angular.element(input.prop('offsetParent'));
                    var tempY = 0;

                    while (temp && typeof(temp.prop('offsetTop')) !== 'undefined') {

                        tempY = temp.prop('offsetTop');
                        top += tempY;
                        temp = angular.element(temp.prop('offsetParent'));

                    }

                        top = top - scrollView.getScrollPosition().top;

                        var inputHeight = input.prop('offsetHeight');
                        var keyboardHeight = info.keyboardHeight;

                        var requiredSroll = windowHeight - keyboardHeight > top + inputHeight + 11 ? 0 : windowHeight - keyboardHeight - top - inputHeight - 12;

                        $timeout(function(){ scrollView.scrollTo(0, - requiredSroll || 0, true); });


                });

                $scope.unbindHideKeyboardHandler = $scope.$on('KeyboardWillHideNotification', function() {
                    $timeout(function(){ scrollView.scrollTo(0, 0, true); });
                });

            };

            $timeout(function(){
                var instances = $ionicScrollDelegate.$getByHandle('your-scroll-handle')._instances;
                instances.length && (scrollView = instances[instances.length - 1]);
            }).then(setupKeyboardEvents);

        });

        $scope.$on('$destroy', function(){
            $scope.unbindShowKeyboardHandler();
            $scope.unbindHideKeyboardHandler();
        });

and on application run:

                   window.addEventListener('native.keyboardshow', keyboardShowHandler);
                   window.addEventListener('native.keyboardhide', keyboardHideHandler);

                   function keyboardShowHandler(info){
                       //alert('Keyboard height is: ' + e.keyboardHeight);
                       console.log("KeyboardWillShowNotification: " + JSON.stringify(info));
                       $rootScope.$broadcast('KeyboardWillShowNotification', info);
                   }

                   function keyboardHideHandler(info){
                       $rootScope.$broadcast('KeyboardWillHideNotification', info);
                   }

and in the template: