How can I combine Baffle.js with an Angularjs app

Question

I have a div that I would like to cross with baffle.js , it should be a clean javascript text animation library and I would like to be able to replace the scrambled text with a server update (SSE) before it is detected.

I can handle server things, I just need to know how I can integrate the js angular js library as a deflector into my angular controller.

Html

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

When the server responds, I would like to overwrite the div with my actual data:

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

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

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

Here is 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();


}]);

, , - , , undefined... $injector:unpr] Unknown provider: $baffleProvider <- $baffle <- MainController

Answer 1

, , , , .

Angularjs, , .

AngularJS {{text}}, .

2 div.

Div " " , 3 ng-hide, true .

angulartextDiv text.

. .

HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div class="angulartextDiv">
      {{ text }} 
    </div>
    <div ng-hide="hideDiv" class="baffle"> 
      Testing my text
    </div>
  </div>
</div>
<script src="https://cdn.rawgit.com/camwiegert/baffle/master/dist/baffle.min.js"></script>
<script>
   var c = baffle('.baffle')
    .start()
    .set({
        characters: "+-\u2022~\u2591\u2588\u2593 \u2593\u2592\u2591!=*",
        speed: 100
    });
  c.start();
  c.reveal(3000);
</script> 

AngularJS

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope, $timeout) {
 // Your code    
  $scope.mytext = function() {
        $scope.text = "Testing my text"; 
    };
   $timeout( function(){
           return $scope.mytext();
        }, 3000 );

   $timeout(function() {
         $scope.hideDiv = true;
      }, 3000);
}); 

codepen https://codepen.io/seyz4all/pen/VzWBqG

,