Scrolling to First Error

Scrolling to First Error

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-sanitize.min.js"></script>
<script src="https://textalk.github.io/angular-schema-form/bower_components/tv4/tv4.js"></script>
<script src="https://textalk.github.io/angular-schema-form/bower_components/objectpath/lib/ObjectPath.js"></script>
<script src="https://textalk.github.io/angular-schema-form/dist/schema-form.min.js"></script>
<script src="https://textalk.github.io/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body ng-app="test">
    <div ng-controller="FormController">
        <form name="myForm" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(myForm)" sf-options="{ formDefaults: { destroyStrategy: 'remove'}}" x-accessible-form></form>
        <p>{{validationMessage}}</p>
        <p>{{data}}</p>
    </div>
</body>

JavaScript

var app = angular.module('test', ['schemaForm']);

app.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {
            	
            	console.log("inside focus directive");
                // find the first invalid element
                var firstInvalid = elem[0].querySelector('input[type="radio"]');
                //if we find one, set focus
                if (firstInvalid) {
                    console.log(firstInvalid);
                    firstInvalid.focus();
                }
            });
        }
    };
});

app.controller('FormController', function ($scope) {

    $scope.schema = {
      "type": "object",
      "properties": {
        "Field1": { "type": "boolean" },
          "Field2": { "type": "string" },
          "Field3": { "type": "string" },
          "Field4": { "type": "string" },
          "Field5": { "type": "string" },
          "Field6": { "type": "string" },
          "Field7": { "type": "string" },
          "Field8": { "type": "string" },
          "Field9": { "type": "string" },
          "Field10": { "type": "string" },
          "Field11": { "type": "string" },
          "Field12": { "type": "string" },
          "Field13": { "type": "string" },
          "Field14": { "type": "string" },
          "Field15": { "type": "string" },
          "Field16": { "type": "string" },
          "Field17": { "type": "string" },
          "Field18": { "type": "string" },
          "Field19": { "type": "string" },
          "Field20": { "type": "string" },
          "Field21": { "type": "string" },
          "Field22": { "type": "string" },
          "Field23": { "type": "string" }
      },
        "required": ["Field1","Field3"]
      
    };


    $scope.form = [
      {
		"type": "section",
		"htmlClass": "row",
		"items": 
            [
                {
                   ...