how to dynamically create templates in angular.js

Question

New to angularjs so I'm not sure how to best phrase this question so this may be a duplicate. I have a table that I want to populate with a label and some check boxes. Each row represents a test metric with two checkboxes indicating "pass" or "fail"

function ListController($scope) {
    $scope.items = [
        {name: 'Feature X', flash: false, html: false},
        {name: 'Feature Y', flash: false, html: false}
    ];
}

I've got the table populating correctly, but what I'm not sure about is how can create this table dynamically? I want to be able to submit this data and create a new table when a new test is selected. The only way I can see right now to invoke this function is on the initialization of the document and I can't see how I can pass in any additional values to change the "items" node based on the test. fiddle below:

http://jsfiddle.net/3Lcue/

Answer 1

You can use $resource to submit/retrieve data from the server:

app = angular.module("Test", ["ngResource"])

function ListController($scope, $resource) {
    var Test = $resource("/tests/:id", {id: "@id"});
    $scope.items = Test.query()

    $scope.addTest: function() {
        $scope.items.push($scope.newTest)
        $scope.newTest = {}
    }
}

and then bind newTest.name, newTest.flash, newTest.html in your view using ng-model.