How to add Angular-enabled elements to DOM?

Question

I would like to add some Angular-enabled DOM elements programmatically. Actually, I probably will need to add custom components. How can I do it?

Here\'s a trivial fiddl

Answer 1

As @Christopher Marshall pointed out, the simplest way to do this is using a repeating element and pushing a new item into scope on the button press.

[HTML]

    

        Add
        

            
{{test}}
        
    

[JS]

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.add = function() {
        $scope.tests.push('New Message');
    };

    $scope.tests = ["Test Message","Test Message 2"];
});