i need ur help figuring out this problem... im new to angular just started playing on ground.
Initially i have only one button on load "Add list", with add list user can able to add multiple lists with itself have a button("Add Phase") for each list, on click of Add phase it should show the content related to that phase.
Im doing this all in dynamic way.
My HTML looks like:
<button ng-click="list()">add list</button>
<div id="container"></div>My controller looks like:
$scope.list =function(){ var name1html = '<div id="ide"><button ng-click="phase()">Add Phase</button><div id="drop"></div></div>'; var name1 = $compile(name1html)($scope); angular.element(document.getElementById('container')).append(name1); } $scope.phase =function(){ var name2html = '<div>123</div>'; var name2 = $compile(name2html)($scope); angular.element(document.getElementById('drop')).append(name2); }Actual Output: On click of 2nd Add phase button it is again adding to 1st button
Expected Output: Im expecting something like this
