Создайте кнопку в JavaScript, которая содержит контроллер angularJS

Question

Мне нужна ваша помощь с моим злым кодом: я хочу реализовать чат (с кнопкой, сгенерированной в чистом javascript и разговором в iframe) на моем веб-сайте, для которого angularJS не является зависимостью.Итак, я делаю все возможное, чтобы реализовать эту кнопку, но проблема в том, что моя кнопка, кажется, не зависит от моего контроллера и моего приложения ...

Это мой фрагмент для создания моего чата (Не обращайте внимания настиль, это только для целей тестирования):

<script type="text/javascript">
      $(function() {

      setTimeout(function(){
            var s0 = document.createElement('script');
            s0.setAttribute("src", "js/angularJS/angular.min.js");
            document.querySelector('body').appendChild(s0);
            var s00 = document.createElement('script');
            s00.setAttribute("src", "js/angularJS/angular-animate.js");
            document.querySelector('body').appendChild(s00);
        }, 100);

        setTimeout(function () {
            var s1 = document.createElement('script');
            s1.setAttribute("src", "js/chats.js");
            document.querySelector('body').appendChild(s1);
            var link  = document.createElement('link');
            link.rel  = 'stylesheet';
            link.type = 'text/css';
            link.href = 'css/btnChat.css';
            var link2  = document.createElement('link');
            link2.rel  = 'stylesheet';
            link2.type = 'text/css';
            link2.href = 'css/animate.css';
            document.querySelector('body').appendChild(link);
            document.querySelector('body').appendChild(link2);
        }, 500);

        setTimeout(function () {
            var a = document.createElement('iframe');
            a.setAttribute("id", "myIframe");
            a.setAttribute("src", "chats.html");
            a.setAttribute("scrolling", "no");
            a.style="width: 1px;min-width:100%;";
            var d = document.createElement('div');
            d.setAttribute("class", "chat");
            d.setAttribute("id", "chat");
            d.style="position: fixed;right: 0px;z-index: 9999;width: 400px;height: 755px;bottom: 0px !important;border: none;";
            var d2 = document.createElement('div');
            d2.setAttribute("class", "chat-choose choosed-bubble");
            d2.setAttribute("id", "btnChat");
            d2.style="position: fixed;right: 0px;z-index: 9999;bottom: 0px !important;border: none;";
            document.querySelector('body').appendChild(d);
            document.querySelector('.chat').appendChild(a);
            document.querySelector('body').appendChild(d2);
        }, 800);

        setTimeout(function () {
            var el =angular.element('#btnChat');
            el.attr('ng-app', 'myApp');
            el.attr('ng-controller', 'ChatCtrl');
            el.attr('ng-click', 'clicMan()');
        }, 1000);

    });
    </script>

Мое приложение и контроллер:

var myApp = angular.module('myApp', ['firebase']);

myApp.controller('ChatCtrl', function($scope, $timeout, $http, $window, $location,$rootScope,$interval,$compile, $injector) {


$scope.clicMan = function(){
  console.log("Clicked !");
}



})

Как видите, угловое приложение вызывается до создания кнопки, поэтому яЯ не знаю, почему моя сгенерированная кнопка не находит ее, потому что у меня следующая ошибка:

Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=ChatCtrl&p1=not%20a%20function%2C%20got%20undefined
    at VM41558 angular.min.js:6
    at sb (VM41558 angular.min.js:23)
    at Pa (VM41558 angular.min.js:23)
    at VM41558 angular.min.js:89
    at ag (VM41558 angular.min.js:72)
    at p (VM41558 angular.min.js:64)
    at g (VM41558 angular.min.js:58)
    at VM41558 angular.min.js:58
    at VM41558 angular.min.js:21
    at m.$eval (VM41558 angular.min.js:145)

Если у вас есть решение для меня, вы можете сказать, что спасли человека от безумия.:)

Ждем ваших ответов!