title: Modal window (popup) alert show on error field using angularJs
body: <p>i created sample program for business validation, here error message showing , but its not showing particular error field , how to solve this issue, </p>
  
  <p>Thanks in advance .................................................................</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  app.controller('myCtrl', function($scope) {
    
    
    $scope.save=function()
    {  
      
      
       if($scope.firstName == undefined)
        {
            $('#popup1').fadeIn($(this).data());
        // in the RC of 1.3 there is function.link only the function customs Validation.compile which
           // needs to be invoked to get at the functions.
       setTimeout(function(){
        $('#popup1').fadeOut($(this).data());
         },3000);
        var element = window.document.getElementById('firstName');
                    if (element)
                      element.focus(); 
       
        }
      if($scope.lastName = undefined){
    
            $('#popup1').fadeIn($(this).data());
        // in the RC of 1.3 there is function.link only the function customs Validation.compile which
           // needs to be invoked to get at the functions.
       setTimeout(function(){
        $('#popup1').fadeOut($(this).data());
         },3000);
        var element = window.document.getElementById('lastName');
                    if (element)
                      element.focus(); 
    }
     
        }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
   
  .modal-box {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 98%;
    background: white;
    border-bottom: 1px solid #aaa;
    border-radius: 20px;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-clip: padding-box;
  }
  @media (min-width: 32em) {
   .modal-box { width: 180px; top: 215px; left: 390px; }
  }
  
  .modal-box header,
  .modal-box .modal-header {
    padding: 1.25em 1.5em;
    border-bottom: 1px solid #ddd;
  }
  
   
  
  .modal-box .modal-body { padding:22px;  background-color: #dd4b39;
  border-radius: 20px;    height: 0px;
      color: white;}
     
   </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;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body &gt;
    
  &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
  
  First Name: &lt;input type="text" ng-model="firstName"&gt;&lt;br&gt;
  Last Name: &lt;input type="text" ng-model="lastName"&gt;&lt;br&gt;
   
    &lt;input type="submit" ng-click="save()"&gt;
  
  &lt;/div&gt;
    &lt;div id="popup1" class="modal-box"&gt;
                             &lt;div class="modal-body"&gt;
                              &lt;span style="position:absolute;top:10px;"&gt;Please Enter the Value &lt;/span&gt;
                            &lt;/div&gt;
        &lt;/div&gt;
    
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>