AngularJS - ng-show in Bootstrap popover in Razor

问题

I have a list of buttons that represent a folder hierarchy on my db. When clicked I want a Bootstrap popover to appear with icon buttons for adding new folders, removing folders, changing hierarchy, etc. However, AngularJS doesn't work in the popover, causing ng-click and ng-show to no longer work. Here's a button:

<button type="button" id="0" ng-click="selectFolder($event)" class="btn btn-default" data-toggle="popover" data-placement="top" title="Bewerk folder" data-content="@popoverContent">@ViewBag.Title</button>

var popoverContent = "";
popoverContent += "<button type='button' id='newHierarchy' class='btn btn-success' ng-click='addHierarchy = !addHierarchy'>";
popoverContent += new Icon("plus").Html;
popoverContent += "</button>";
popoverContent += "<input type='text' id='newHierarchyName' class='form-control' name='newHierarchyName' ng-show='addHierarchy' />";

I found some similar questions whose answer all involved directives. However, I don't understand how I should implement a directive in my case.

来源：https://stackoverflow.com/questions/34998178/angularjs-ng-show-in-bootstrap-popover-in-razor