title: How to get a DOM element from the controller doing Stripe Integration?
body: <p>Hi I'm trying to implement Stripe example in an AngularJS application, I have a initializer that calls a function named <code>initStripe();</code> this works equal to the Stripe example:</p>
  
  <pre><code>function initStripe()
  {
      $scope.stripe = Stripe('pk_test_6pRNasdwwehFeQd4XMUh');
      $scope.elements = $scope.stripe.elements();
      $scope.style = {
          base: {
              color: '#32325d',
              lineHeight: '18px',
              fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
              fontSmoothing: 'antialiased',
              fontSize: '16px',
              '::placeholder': {
                  color: '#aab7c4'
              }
          },
          invalid: {
              color: '#fa755a',
              iconColor: '#fa755a'
          }
      };
  
      $scope.card = $scope.elements.create('card', {style: $scope.style});
      //console.log( document.getElementById('body') );
      $scope.card.mount('#card-element');
  }
  </code></pre>
  
  <p>The problem is in the last instruction <code>$scope.card.mount('#card-element');</code>, here I get this error:</p>
  
  <blockquote>
    <p>The selector you specified (<code>#card-element</code>) applies to no DOM
    elements that are currently on the page.</p>
  </blockquote>
  
  <p>Doing tests I can check that moving the HTML code of position works, but not works in the div I need. </p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- here works --&gt;
     &lt;div ng-if="currentStep == 3"&gt;
      &lt;!-- here doesn't works --&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The HTML is the same of the Stripe website example:</p>
  
  <p><a href="https://stripe.com/docs/stripe-js/elements/quickstart" rel="nofollow noreferrer">https://stripe.com/docs/stripe-js/elements/quickstart</a></p>