title: Scroll to the first error field and also display error message in all other fields
body: <p>Following is my code.
  I want to scroll to the first error field which is not filed when the save function invoked even if there are many error fields.But error message must be shown in all fields. There will be n number of rows to the table.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  function PeopleCtrl($scope, $http) {
  
      $scope.people = [];
  
     $scope.people = [
      {
      id: 1,
      name: "a",
        valid:true
      },
  {
      id: 2,
      name: "b",
        valid:true},    {
      id: 3,
      name: "c",
        valid:true},
  {
      id: 4,
      name: "d",
        valid:true},    {
      id: 5,
      name: "e",
        valid:true},
  {
      id: 6,
      name: "f",
        valid:true},    {
      id: 7,
      name: "g",
        valid:true},
  {
      id: 8,
      name: "h",
        valid:true},    {
      id: 9,
      name: "i",
        valid:true},
  {
      id: 10,
      name: "j",
        valid:true},    {
      id: 11,
      name: "k",
        valid:true},
  {
      id: 12,
      name: "l",
        valid:true},    {
      id: 13,
      name: "m",
        valid:true},
  {
      id: 14,
      name: "n",
        valid:true},    {
      id: 15,
      name: "o",
        valid:true},
  {
      id: 16,
      name: "p",
        valid:true},    {
      id: 17,
      name: "q",
        valid:true},
  {
      id: 18,
      name: "r",
        valid:true},    {
      id: 19,
      name: "s",
        valid:true},
  {
      id: 20,
      name: "t",
        valid:true},    {
      id: 21,
      name: "u",
        valid:true},
  {
      id: 22,
      name: "v",
        valid:true},    {
      id: 23,
      name: "w",
        valid:true},
  {
      id: 24,
      name: "x",
        valid:true},    {
      id: 25,
      name: "y",
        valid:true},
  {
      id: 26,
      name: "z",
        valid:true}
  ];
        
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border: 1px solid #666;   
      width: 100%;
  }
  th {
    background: #f8f8f8; 
    font-weight: bold;    
      padding: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp"&gt;
  &lt;div ng-controller="PeopleCtrl"&gt;
  &lt;button ng-click="saveData()"&gt;Save&lt;/button&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Id&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="person in people"&gt;
          &lt;td&gt;{{person.id}}&lt;/td&gt;
          &lt;td&gt;{{person.name}}&lt;/td&gt;
          &lt;td&gt;&lt;input ng-model="person.age"&gt;
          &lt;p ng-hide="person.valid"&gt;
          &lt;span&gt;Please fill the field&lt;/span&gt;
          &lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a sample example created for stack, i will implement the methods suggesting in my actual code. Thank you.</p>