title: Best way to integrate captcha in angularJS
body: <p>I'm relatively new to angularJS and I wonder what would be the cleanest solution to the following problem.
  Let's say I have a form such as follows</p>
  
  <pre><code>&lt;form name="contactform"&gt;
     &lt;select id="salutation" name="salutation" required="true" ng-model="contactRequest.salutation"&gt;&lt;option value="Herr" selected=""&gt;Herr&lt;/option&gt;&lt;option value="Frau"&gt;Frau&lt;/option&gt;&lt;/select&gt;
  
     &lt;img width="255" height="70" alt="" src="/website/var/tmp/aed4d639a26c4614cdac2a967381c61c.png" name="captcha[img]"&gt; 
  
     &lt;captcha-reloader reload-url="/refresh-captcha" img-tag-name="captcha[img]" hidden-field-name="captcha[id]"&gt;&lt;/captcha-reloader&gt;
  
     &lt;input type="text" name="captcha[input]" required="true" ng-model="contactRequest.captcha.input"&gt;                
  
     &lt;input type="text" style="display: none;" ng-model="contactRequest.captcha.id" value="aed4d639a26c4614cdac2a967381c61c" name="captcha[id]"&gt;   
  ...
  </code></pre>
  
  <p>As you can see, it uses a directive to display a button which will reload the CAPTCHA. It is defined as</p>
  
  <pre><code>    myApp.directive('captchaReloader', function () {
      return {
          restrict: 'E',
          scope: {
              reloadUrl: '@',
              imgTagName: '@',
              hiddenFieldName: '@'
          }, //isolate scope
          template: '&lt;a href="" ng-click="reloadCaptcha()" class="captcha-reload"&gt;&lt;/a&gt;',
          link: function (scope, element, attrs) {
  
          },
          controller: function ($scope, $element, $attrs, $http) {
              $scope.reloadCaptcha = function () {
                  $http.get($attrs.reloadUrl).then(function (res) {
                      angular.element('img[name="' + $attrs.imgTagName + '"]').attr('src', res.data.imgSrc);
                      angular.element('input[name="' + $attrs.hiddenFieldName + '"]').val(res.data.id);
                      angular.element('input[name="' + $attrs.hiddenFieldName + '"]').trigger('input');
                  });
              };
          }
      };
  )};
  </code></pre>
  
  <p>If I click on the button, the captcha image and value (hidden field) are updated. It works fine so far.</p>
  
  <p>Now, I want to handle form submission in controller (see methode below). If there is an error (server-side validation), the captcha has to be updated. I don't know whats the best way to trigger the updated-process defined in the directive. Can anyone help?</p>
  
  <pre><code>    myApp.controller('KontaktCtrl', function ($scope, $location, CustomerDataService, CaptchaService) {
      $scope.contactRequest = {
          salutation: 'Herr',
          captcha: {
              id: initialCaptchaId
          }
      };
      $scope.errors = {};
  
      $scope.submitAction = function () {
          CustomerDataService.sendRequest($scope.contactRequest).then(function (res) {
              var data = res.data;
              if (res.data.data !== null) { //errors in form. Display them
                  //error handling
                  $scope.reloadCaptcha();
              } else {
                  goToHomeView();
              }
          }, function (error) {
              console.log('An error occurred while updating!', error);
          });
      };
  
  
      var goToHomeView = function () {
          $location.path('/');
      };
  });
  </code></pre>
  
  <p>Additionally, I have to init the values of select-box and captcha, cause otherwise they are not sent (because the are untouched). Is there any way to avoid this?</p>
  
  <p>PS: I found a reCAPTCHA directive, but reCAPTCHA is no option due to styling limitations.</p>