title: Delete a Dynamically Created Popover in Angular
body: <p>I am new to angular and I have been able to create a bootstrap popover around selected text with the following function</p>
  
  <pre><code> $scope.highlight = function () {
  
          var a = document.createElement("a");
          a.setAttribute('tabindex', "0");
          a.setAttribute('data-toggle','popover');
          a.setAttribute("id","1");
          a.setAttribute('data-content',"&lt;button type='button' class='btn btn-default' ng-click='deleteLabel()'&gt;&lt;small&gt;&lt;span class='glyphicon glyphicon-remove'&gt;&lt;/span&gt;&lt;/small&gt;&lt;/button&gt;");
          a.setAttribute('data-html','True');
  
          if (window.getSelection) {
                  var sel = window.getSelection()
                  var range = sel.getRangeAt(0).cloneRange();
                  range.surroundContents(a);
                  sel.removeAllRanges();
                  sel.addRange(range);
          }
  
          $timeout(function(){
            $('[data-toggle="popover"]').popover();
          }, 50);
      };
  </code></pre>
  
  <p>And, in the above code, I create the popover with a button inside it which when clicked (<code>ng-click='deleteLabel()'</code>) should call the following function which should delete the element</p>
  
  <pre><code> $scope.deleteLabel= function(){
              alert("removing label");
              var labelEl=document.getElementById("1");
              labelEl.remove();
          };
  </code></pre>
  
  <p>However, it does not appear that <code>deleteLabel()</code> is even being called when the button in the popover is clicked. Is there something wrong with how I am calling this function from within the popover?</p>