title: Stripe checkout not working in angular 1.x
body: <p>I am using stripe payment to process payments. I followed this <a href="https://github.com/laurihy/angular-payments" rel="nofollow noreferrer">GITHUB</a> project and this <a href="https://www.airpair.com/javascript/integrating-stripe-into-angular-app" rel="nofollow noreferrer">blog</a>.</p>
  
  <p>My project has nested views and uses routers as well.</p>
  
  <p>My project structure looks like </p>
  
  <pre><code>src
    app
      views
      controllers
      directives
      index.html
      app.js
  </code></pre>
  
  <p>The app.js is where angular module is loaded manually and has the routers.</p>
  
  <p><strong><em>app.js</em></strong></p>
  
  <pre><code>var myApp = angular.module('myApp', ['ui.router', 'formData']);
  myApp.config(function($stateProvider, $urlRouterProvider, $httpProvider) { 
      // routers
  }
  </code></pre>
  
  <p>The index.html is where the angular and stripe scripts are included</p>
  
  <p><strong><em>index.html</em></strong></p>
  
  <pre><code>&lt;head lang="en"&gt;
      &lt;script type="text/javascript" src="https://js.stripe.com/v2/"&gt;&lt;/script&gt;
      &lt;Script src="resources/angular.min.js"&gt;&lt;/Script&gt;
      &lt;Script src="resources/angular-ui-router.min.js"&gt;&lt;/Script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;script src="directives/formData/formData.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" 
          src="resources/angular-payments.js"&gt;
      &lt;/script&gt;
      &lt;script&gt;
          Stripe.setPublishableKey('key')
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;div&gt;
      &lt;div ui-view&gt;   
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the formData directive is where I am trying to include the strip payment</p>
  
  <p><strong><em>formData.js</em></strong></p>
  
  <pre><code>    var formData = angular.module('formData',['angularPayments']);
  formData.directive('formData',function(){
      return {
          restrict: 'EA',
          scope: {},
          replace: true,
          link: function($scope, element, attributes){
  
          },
          controller: function($scope,$attrs,$http, $state){
              //This is the callback for strip from the links above as followed
              $scope.stripeCallback = function (code, result) {
                  console.log("inside cc callbakc");
                  if (result.error) {
                      console.log("credit card error");
                      window.alert('it failed! error: ' + result.error.message);
                  } else {
                      console.log(result);
                      console.log("credit card succes "+result.id);
                      window.alert('success! token: ' + result.id);
                  }
              };
  
          },
          templateUrl: 'directives/formData/formData.tpl.html'
      }
  });
  </code></pre>
  
  <p>formData.tpl.html has another ui router</p>
  
  <p><strong><em>formData.tpl.html</em></strong></p>
  
  <pre><code>&lt;form id="signup-form" ng-submit="processForm()"&gt;
      &lt;!-- our nested state views will be injected here --&gt;
      &lt;div  ui-view&gt;&lt;/div
  &lt;/form&gt;
  </code></pre>
  
  <p>and one of the ui router html page is the payment page with this code</p>
  
  <pre><code>&lt;form stripe-form="stripeCallback" name="checkoutForm"&gt;&gt;
      &lt;input ng-model="number" placeholder="Card Number" 
               payments-format="card" payments-validate="card" name="card" /&gt;
      &lt;input ng-model="expiry" placeholder="Expiration" 
               payments-format="expiry" payments-validate="expiry"                
               name="expiry" /&gt;
      &lt;input ng-model="cvc" placeholder="CVC" payments-format="cvc" payments-validate="cvc" name="cvc" /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt; 
  </code></pre>
  
  <p>I get the validations working but nothing prints in the console when I hit submit. I guess the js is not being fired. Let me know if you need more information. </p>