angular reCaptcha directive sample for listgroup question - Plunker

<!DOCTYPE html>
<html ng-app="myPlunk">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="AppController as appVm">
    <h1>Hello angular {{appVm.version}}</h1>
    <p>a plunk for <a href="https://groups.google.com/forum/#!topic/angular/MKA6i1SYjQA">an listgoup question</a></p>
    
    <form name="myForm">
        <input type="text" ng-model='appVm.user' required>

        <re-captcha ng-model='appVm.chaptcha' ></re-captcha>
        
    </form>
    
    <div class="well">
        <pre>{{myForm|json}}</pre>
    </div>
    
    
    
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

(function() {
    "use strict";
    //Use an IIFE

    function AppController() {
        this.version = angular.version.full + " " + angular.version.codeName;
    }

    function reCapthcha() {
        var ddo = {
            restrict: 'AE',
            scope: {},
            require: 'ngModel',
            link: link,
        };
        return ddo;


        function link(scope, elm, attrs, ngModel) {
            var id;
            ngModel.$validators.captcha = function(modelValue, ViewValue) {
                // if the viewvalue is empty, there is no response yet,
                // so we need to raise an error.
                return !!ViewValue;
            };

            function update(response) {
                ngModel.$setViewValue(response);
                ngModel.$render();
            }
            
            function expired() {
                grecaptcha.reset(id);
                ngModel.$setViewValue('');
                ngModel.$render();
                // do an apply to make sure the  empty response is 
                // proaganded into your models/view.
                // not really needed in most cases tough! so commented by default
                // scope.$apply();
            }

            function iscaptchaReady() {
                if (typeof grecaptcha !== "object") {
                    // api not yet ready, retry in a while
                    return setTimeout(iscaptchaReady, 250);
                }
                id = grecaptcha.render(
                    elm[0], {
                        // put your own sitekey in here, otherwise it will not
                        // function.
                        "sitekey": "6LeVCAUTAAAAACfpl7XVHRFa2DxNWUi7wPzxI5Fd",
                        callback: update,
                        "expired-callback": expired
                    }
                );
            }
            iscaptchaReady();
        }
    }

    //Hook up all my function into angular
    angular.module('myPlunk', [])
        .directive('reCaptcha', reCapthcha)
        .controller('AppController', AppController);

}());

/* Styles go here */

# angular reCaptcha directive

Simple directive to support google recaptcha's 
needs an ng-model to keep the response of the recaptcha, setts the $error when it's not a valid user.
Resets after timeout.

To make this system more bulletproof, you should use the respone on your server to verify 
if the user isn't a robot