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

If you want multiple tests, I'd suggest setting it up like so.

    

        Add
        

            
{{test.name}}
        
    



$scope.tests = []; // define this as an array

$scope.add = function() {
   var newTest = {name: 'Test Message'};

   $scope.tests.push(newTest);
};

This will dynamically create divs based on your tests object.