title: Listening to signature pad changes in AngularJs
body: <p>I'm using a <a href="https://github.com/szimek/signature_pad" rel="nofollow">signature_pad</a> and an email text field which both must be filled before continuing in my web application (<code>x-ng-disabled="!checkSignatureAndEmail()"</code>).</p>
  
  <p>The text field has a <code>ng-model</code> so any changes are noticed immediately but the signature pad is plain JavaScript. So if I first enter the email and then sign in the signature pad the button won't become enabled.</p>
  
  <p>Is there any way to register a listener or something like that? If yes, how'd I do this?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="modal fade" id="signatureDialog" role="dialog"&gt;
          &lt;div class="modal-dialog modal-lg"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;Bestellung best&amp;auml;tigen&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;Mit ihrer Unterschrift best&amp;auml;tigen Sie... bla bla..&lt;/p&gt;
                      &lt;input type="text" class="form-control" x-ng-model="email"&gt;
                      &lt;br&gt;
                      &lt;canvas id="signature-pad" width="700" height="150" style="border:1px solid #B0B0B0; border-radius: 4px;" x-ng-init="initSignaturePad()"&gt;&lt;/canvas&gt;
                      &lt;br&gt;
                      &lt;button type="button" class="btn btn-default" x-ng-click="signaturePad.clear()"&gt;Clear&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-primary" x-ng-disabled="!checkSignatureAndEmail()" x-ng-click="saveOrder(orderInput)" data-dismiss="modal"&gt;Best&amp;auml;tigen&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Abbrechen&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my controller:</p>
  
  <p>Create SignaturePad:</p>
  
  <pre><code>$scope.initSignaturePad = function() {
      $scope.signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
            minWidth: 1.2,
            maxWidth: 3,
            backgroundColor: 'rgba(250, 250, 250, 1)',
            penColor: 'rgb(0, 0, 100)'
      });
  }
  </code></pre>
  
  <p>Validation function:</p>
  
  <pre><code>$scope.checkSignatureAndEmail = function() {
      var re = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test($scope.email) &amp;&amp; !$scope.signaturePad.isEmpty();
  };
  </code></pre>