How can I combined Baffle.js with an Angularjs app

I have a div that I would like to scramble with baffle.js, it is supposed to be a pure javascript text animation library and I would like to be able to replace the scrambled text with a server update (SSE) before it gets revealed.

I can handle the server stuff I just need to know how I can combine a non-angular js library like baffle into my angular controller.

Html:

<div class="baffle">ad124asfd$afarA1</div>

When server responds I'd like to overwrite the div with my actual data:

<div class="baffle">{{Server Response}}</div>

Then finally stop the scramble animation so the new data is visible in the dom:

<div class="baffle">My server response!</div>

Here's my controller:

app.controller("MainController", ['$scope', 'LxNotificationService', '$http', 'postService', 'getService', '$baffle', function ($scope, LxNotificationService, $http, postService, getService, $baffle) {

// Start baffle on any element(s).
$scope.scramble = function () {
    $('.baffle').each(function(i) {
      (function() {
        var Baffle;
        Baffle = function() {
          function Baffle() {
            var $baffle, b;
            $baffle = $('.baffle');
            b = baffle('.baffle', {
              characters: '+-\u2022~\u2591\u2588\u2593 \u2593\u2592\u2591!=*',
              speed: 100
            });
            $baffle.addClass('is-started');
            b.start();
            b.reveal(2000);
            setTimeout(()=>inProgress = false,2500)
          }
          return Baffle;
        }();
        $(function() {
          return new Baffle();
        });
      }.call(this));
    });
};

$scope.scramble();


}]);

All I get are injector errors in the controller, but if I don't inject it as a dependency it says baffle undefined... $injector:unpr] Unknown provider: $baffleProvider <- $baffle <- MainController