Angular compile demo

How to insert DOM elements in real time.

by arzo

HTML

<div ng-app="test">
    <!--<div ng2-controller="listController">
    hello {{name}}
    <input ng-model='name'/>
</div>-->
    <div id=content /></div>

JavaScript

var app = angular.module('test', [])
    .controller('listController', function ($scope) {
    $scope.name = "Artur";
})
.config(() => {
    console.log('elo0')
})

setTimeout(function () {

    console.log(
        //angular.module('test').run(() => {console.log(1);})
        angular.element(document.getElementsByTagName('div')[0])
    .injector().invoke(function($controller) {console.log($controller('listControllerA', function($scope){$scope.name="jan";}))})
    )

    function add() {
        var $div = document.createElement('div')
        $div.innerHTML = '<div ng-controller="listControllerA">Hello {{name}}<input ng-model="name"/></div>'
        document.getElementById('content').appendChild($div);
        var el = document.getElementsByTagName('div')[0]
        console.log(el)
        angular.
        element(el)
        //module('test')
        .injector()
            .invoke(function ($compile) {
            var scope = angular.element($div).scope();
            $compile($div)(scope);
        });
    }
    }, 1000);