title: Angular Ben Drucker's credit card script not working
body: <p>I am trying to integrate Ben Drucker's Credit Card Validation (<a href="https://github.com/bendrucker/angular-credit-cards" rel="nofollow">https://github.com/bendrucker/angular-credit-cards</a>) in our Angular Application.</p>
  
  <p>In  App.js i have the following declaration:</p>
  
  <pre><code> angular
    .module('flyvipApp', [
      'ngAnimate',
      'ngCookies',
      'ngResource',
      'ngRoute',
      'ngSanitize',
      'ngTouch',
      'mm.foundation',
      'ui.router',
      'credit-cards',
      'ui.router.stateHelper'
    ])
  </code></pre>
  
  <p>The following is the form code:</p>
  
  <pre><code>&lt;div id="sidePanelContent"&gt;
  
      &lt;a ui-sref="^" ui-sref-opts="{reload: true}" class="closeSidePanel"&gt;&lt;img
          src="images/admin/botao-fechar.png" alt="Fechar"&gt;&lt;/a&gt;
  
      &lt;h1&gt;Pagamento do Voo&lt;/h1&gt;
      &lt;form name="ccForm"&gt;
          &lt;div&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;ID:&lt;/strong&gt; {{flight.flightid}}
              &lt;/p&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;Voo:&lt;/strong&gt; {{flight.fromairport.name}} &amp;#10141;
                  {{flight.toairport.name}}
              &lt;/p&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;Horário:&lt;/strong&gt; {{flight.dateofdeparture |
                  formatDateTime}}h
              &lt;/p&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;Lugares disponíveis:&lt;/strong&gt; {{flight.availableseats}}
              &lt;/p&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;Aeronave:&lt;/strong&gt; {{flight.airplane.name}}
              &lt;/p&gt;
              &lt;p ng-show="flight"&gt;
                  &lt;strong&gt;Preço atual:&lt;/strong&gt; R$ {{flight.price | formatPrice}}
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;h1&gt;Dados do Cartao&lt;/h1&gt;
          &lt;div class="large-12 columns no-paddingleft"&gt;
              &lt;label&gt; Nome no cartao:&lt;/label&gt; &lt;input type="text"
                  ng-model="cardName" /&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt; Tipo de cartao:&lt;/label&gt; &lt;select ng-model="cardType"
                  ng-options="type as type for type in ['Visa', 'American Express', 'MasterCard']"&gt;&lt;/select&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;div class="large-12 columns no-paddingleft"&gt;
              &lt;label&gt;Numero do cartao:&lt;/label&gt; &lt;input type="text"
                  ng-model="card.number" cc-number cc-type="cardType" /&gt;&lt;br /&gt;
          &lt;/div&gt;
          &lt;label&gt;Codigo de seguranca:&lt;/label&gt; &lt;input type="text"
              ng-model="card.cvc" cc-type="cardNumber.$type" /&gt;&lt;br /&gt; &lt;label&gt;Data
              Expiracao:&lt;/label&gt;
          &lt;div cc-exp&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;label&gt;MES:&lt;/label&gt; &lt;input type="text" ng-model="card.exp_month"
                      cc-exp-month /&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-3"&gt;
                  &lt;label&gt;ANO:&lt;/label&gt;&lt;input type="text" ng-model="card.exp_year"
                      cc-exp-year /&gt;&lt;br /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script&gt;
              console.log(card.number + "   " + card.exp_month);
          &lt;/script&gt;
          &lt;button class="button" ng-click="DoPayment(flight.flightid)"
              ng-disabled="!ccForm.ccNumber.$valid"&gt;Pagar com Cartao de
              Credito&lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The form gets error "Error: Can't find variable: "card".</p>
  
  <p>I thought that once I included "credit cards" module in app.js card would be automatically declared.</p>
  
  <p>thanks</p>