title: AngularUI popover style change of parent element on click
body: <p>I have a pretty specific problem.  Recently I figured out how to <a href="https://stackoverflow.com/questions/32360155/angular-ui-popover-close-button/32465263#32465263">add a close button to an AngularUI popover</a>.  Originally the user had to click on the popover parent to open and to close it, so I had functionality added in that changed the style of that element on a click event.  With the addition of the close button, I want to simulate the same effect when the user clicks it.  I set up a <a href="http://plnkr.co/edit/tgMIzrouUWR7mzy5pG1W?p=preview" rel="nofollow noreferrer">plnkr here</a> to play with.  </p>
  
  <p>So far I've tried to add <code>ng-click="toggle(); style=!style"</code> in the popover template, but that didn't work.  I think that I have to access the <code>style</code> variable in the <code>popoverToggle</code> directive, but I don't know how to do that.  It might also just be possible to manipulate it in the HTML.</p>
  
  <p><strong>Popover template</strong></p>
  
  <pre><code>&lt;div&gt;&lt;span ng-click="toggle()"&gt;X&lt;/span&gt;&lt;/div&gt;
  &lt;p&gt;content&lt;/p&gt;
  </code></pre>
  
  <p><strong>popoverToggle.js</strong></p>
  
  <pre><code>angular.module('app')
      .config(function($tooltipProvider) {
          $tooltipProvider.setTriggers({'open': 'close'});
        })
  
        .directive('popoverToggle', function($timeout) {
          return {
            scope: true,
            link: function(scope, element, attrs) {
              scope.toggle = function() {
                $timeout(function() {
                  element.triggerHandler(scope.openned ? 'close' : 'open');
                  scope.openned = !scope.openned;
                  scope.style = !scope.style; // doesn't do anything either
                });
              };
              return element.on('click', scope.toggle);
            }
          };
        });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;span ng-class="{'border-gray': style}" style="margin: 40px" ng-click="style=!style" class="red-btn"&gt;
    &lt;span popover-placement="bottom" popover-template="'popover-template.html'"
    popover-trigger="open" popover-append-to-body="true" popover-toggle&gt;click me&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>