title: Angularjs href show "please fill out this field" if required fields are not filled
body: <p>I want to have input validation so that if the user clicks on href, they should see "please fill out this field" if the required input texts are not filled. It works if I change a href to button, but that is not what I am looking for.</p>
  
  <p>Here is what I am trying to do:
  <a href="https://jsfiddle.net/pd7ty1ak/2/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
      &lt;form name="myform"&gt;
          &lt;input type="text" ng-model='name' ng-required="true" /&gt;
          &lt;a href ng-click="myform.$valid &amp;&amp; dostuff()"&gt;Preview&lt;/a&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.name=undefined;
      $scope.dostuff = function(){
          //do stuff
      };
  });
  </code></pre>
  
  <p>Any suggestions?</p>