title: Google Recaptcha not working on ui bootstrap modal
body: <p>Here's my <code>HTML</code>:</p>
  
  <p>I added <code>comments</code> on my HTML where I added the captcha element.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body ng-app="testApp"&gt;
      
      &lt;!-- this will display --&gt;
      &lt;div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"&gt;&lt;/div&gt;
      
      &lt;div ng-controller="ModalDemoCtrl"&gt;
          &lt;script type="text/ng-template" id="ModalView.html"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;h1&gt; Captcha here!&lt;/h1&gt;
                  
                  &lt;!-- this will not display --&gt;
                  &lt;div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"&gt;&lt;/div&gt;
                  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
                  &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/script&gt;
  
          &lt;button type="button" class="btn btn-default" ng-click="triggerModal()"&gt;Trigger Modal&lt;/button&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's my <code>AngularJS</code> code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('testApp', ['ngAnimate','ui.bootstrap']);
  angular.module('testApp').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
      
      
    $scope.triggerModal = function(){
        $scope.open();
    }
  
  
    $scope.animationsEnabled = true;
  
    $scope.open = function (size) {
  
      var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'ModalView.html',
        controller: 'ModalInstanceCtrl'
      });
  
      modalInstance.result.then(function (result) {
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  
    $scope.toggleAnimation = function () {
      $scope.animationsEnabled = !$scope.animationsEnabled;
    };
  
  });
  
  // Please note that $uibModalInstance represents a modal window (instance) dependency.
  // It is not the same as the $uibModal service used above.
  
  angular.module('testApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
  
    $scope.ok = function () {
      $uibModalInstance.dismiss();
    };
  
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
  });</code></pre>
  </div>
  </div>
  </p>