How to dynamically add more input boxes on button click? - angularjs

Question

I'm trying to build a pretty simple checklist app. I just can't quite get this right. When the user wants to add an item, he should click the button to add an item. Then there should be input boxes for item name and quantity. This part works but if the user then clicks the button to add another item, it should give him more input boxes, and this is what I can't get to work. Using Angular and typescript, not using $scope.
Here's my controller:
export class CreateItemListController {
public itemList;
public item;
public items = [];
public addNew() {
debugger;
this.items = []
var item = {itemName: "default name", itemQty: "default qty"}; // you can set default values here
this.items.push(item);
}
HTML
<form>
<div>
Title <input ng-model="controller.itemList.title" />
<div ng-repeat="item in controller.items">
Item Name <input ng-model="controller.item.itemName" />
Quantity <input ng-model="controller.item.itemQty" />
</div>
<button ng-click="controller.addNew()">Add New Item</button>
</div>
<button ng-click="controller.save()" type="submit">Submit</button>
</form>
and models
namespace BringIt.Models {
public class ItemList {
public int Id { get; set; }
public string Title { get; set; }
public DateTime EventDate { get; set; }
public ICollection<Item> Items { get; set; }
}
}
namespace BringIt.Models {
public class Item {
public int Id { get; set; }
public string ItemName { get; set; }
public int ItemQty { get; set; }
public string Person { get; set; }
public ItemList ItemList { get; set; }
}
}

Answer 1

I think, the problem is that you are again initializing your array in the addNew() function.
Change the function to
public addNew() {
var item = {itemName: "default name", itemQty: "default qty"};
this.items.push(item);
}
Notice I have removed the this.items = [] line