title: Warnings in AngularJs
body: <p>Angularjs has great infrastructure for form validation and showing error messages. But, I am in a situation that I have to show a warning message to a user in a specific scenario. Here is the diagram of my simple form<br>
  <img src="https://i.stack.imgur.com/BRLxf.jpg" alt="enter image description here"><br>
  The form has required and pattern validation applied on both fields. In addition to this validation I want a warning message to be displayed to the user if <code>VatAmount</code> is not 20 percent of the <code>InvoiceAmount</code>. The warning will differ from validation in following aspects</p>
  
  <ol>
  <li>It will not prevent the form submission</li>
  <li>It will only appear if both fields (InvoiceAmount and VATAmount) are
  valid</li>
  <li>The warning should have a button or link that would read "Change and
  proceed". When user presses that button the warning message will
  hide and focus will be set to VATAmount field.</li>
  </ol>
  
  <p>I believe this is a prefect use case for creating a directive. Actually, I have given it a try and put my effort in the form of a plunker. But my directive does not handle following cases</p>
  
  <ol>
  <li>It appears even if the fields involved in warning are invalid</li>
  <li>The show and hide functionality is not implemented (have no idea how
  to target it)  </li>
  </ol>
  
  <p><strong><a href="http://plnkr.co/edit/VbekUFbQeTvtM5iemWIg?p=preview" rel="noreferrer">Here</a> is the link to the plunker</strong></p>