adding ng-content dynamically

by alexsuch

HTML

<div id="container" ng-controller="dCtrl">
    <ul>
        <li ng-click="addLink()">Add link</li>    
        <li ng-click="addInput()">Add input</li>    
        <li ng-click="addLabel()">Add label</li>    
    </ul>
    {{ content }}
</div>

JavaScript

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

dynamically.controller('dCtrl', ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout){
    $scope.content = 'CONTENT';
    
    $scope.sayHello = function(text){
        alert('hello ' + text)
    }
    
    $scope.addLink = function(){
        var cloned = $compile('<div><a ng-click="sayHello(\''+Math.random()+'\')">SOY un link</a></div>')($scope, function(scope, cloned){});
        angular.element(document.querySelector('#container')).append(cloned);
    } 
    
    $scope.addInput = function(){
        var cloned = $compile('<div><input type="text" ng-model="model" /></div>')($scope, function(scope, cloned){});
        angular.element(document.querySelector('#container')).append(cloned);
    }
    
    $scope.addLabel = function(){
        var cloned = $compile('<div><label ng-bind="model"></label> {{ 1+1 }}</div>')($scope, function(scope, cloned){});
        angular.element(document.querySelector('#container')).append(cloned);
    }
}]);