How can I implement the Plaid API using Ionic?

I was able to successfully implement the API on web, here is what it looks like, I have a button in a regular html file...

<div>
    <span class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>
</div>

I include the script tag...

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>

and I include the following javascript in the html body...

<script type="text/javascript">
  var sandboxHandler = Plaid.create({
      clientName: 'SUM',
      env: 'tartan',
      product: 'auth',
      key: 'test_key',
      onSuccess: function(token) {
        //window.location = '/accounts.html?public_token=' + token;
        console.log("yes");
      },
    });

  // Open the "Institution Select" view using the sandbox Link handler.
    document.getElementById('sandboxLinkButton').onclick = function() {
      sandboxHandler.open();
    };

</script>

Now I want to do the same using angular js. I'm using an ionic framework (not that it really matters). So I first display the necessary html using the following...

app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/app');
  $stateProvider

  .state('app', {
    url: '/app',
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
});

My menu.html file contains the following button...

 <span ng-click="create()" class="radio-button radio-left" id="sandboxLinkButton">Sandbox Mode</span>

on ng-click it reaches the following controller. I tried to implement the API in this controller to no avail...

app.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
    var sandboxHandler = Plaid.create({
    clientName: 'SUM',
    env: 'tartan',
    product: 'auth',
    key: 'test_key',
    onSuccess: function(token) {
        console.log("yes");
    },
  });

  $scope.create = function() {
    sandboxHandler.open();
  }
});

I get the error Plaid is not defined in the controller. Why is that?

EDIT

I replicated a web app version using angular and it worked. I used the following CDN instead of the ionic/angular one

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

But I still can't get it to work on my ionic web app. Has anyone else ever come across this issue?

Solution

When I included the library I immediately got the following error in the browser: Uncaught TypeError: Cannot read property 'appendChild' of null

There are similar questions about this error regarding different libraries here and here, however I was not able to solve the problem based on those answers.

The closest thing to a solution that I found was in this issue report within the Plaid repository on GitHub. It describes a problem with the library not working when placed in the <head> tag. A commit within this issue report describes that this problem can be solved by including the script inside the <body> tag instead of the <head> tag.

I would recommend subscribing to the issue report to see whether other solutions will be introduced in the future.

So tldr; Try moving the <script> tag from <head> to the <body>.