Angualr js I couldn't able to call my buttons dynamically

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