title: using AngularJS ng-class in a span element
body: <p>I have a dashboard-style widget container, which contains a header panel.
  I have several icons in the header panel which implements the following features:</p>
  
  <p>1) collapse widget
  2) maximize widget
  3) launch widget settings
  4) close widget</p>
  
  <p>Item #2 is the one where I'm having trouble. I need to swap out the Maximize icon with a Restore icon when it's clicked.</p>
  
  <p>Using the Collapse behavior as a guide, I can use <code>ng-class</code> to switch icons, however my <code>ng-click</code> will be different because I call a method within the directive.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="widget-header panel-heading"&gt;
   &lt;h3 class="panel-title"&gt;
    &lt;span class="widget-title" ng-dblclick="editTitle(widget)" ng-hide="widget.editingTitle"&gt;{{widget.title}}&lt;/span&gt;
    &lt;form action="" class="widget-title" ng-show="widget.editingTitle" ng-submit="saveTitleEdit(widget)"&gt;
     &lt;input type="text" ng-model="widget.title" class="form-control"&gt;
    &lt;/form&gt;
    &lt;span class="label label-primary" ng-if="!options.hideWidgetName"&gt;{{widget.name}}&lt;/span&gt;
    &lt;span ng-click="removeWidget(widget);" class="glyphicon glyphicon-remove" ng-if="!options.hideWidgetClose"&gt;&lt;/span&gt;
    &lt;span title="config" ng-click="openWidgetSettings(widget);" class="glyphicon glyphicon-cog" ng-if="!options.hideWidgetSettings"&gt;&lt;/span&gt;
  
    &lt;span title="maximize" ng-show="widget.gadgetConfigured" ng-click="maxResizer($event)" class="glyphicon" ng-class="{'glyphicon-resize-full': !widget.maximized, 'glyphicon-plus': widget.maximized}" &gt;&lt;/span&gt;
  
    &lt;span title="collapse" ng-show="widget.gadgetConfigured" ng-click="widget.contentStyle.display = (widget.contentStyle.display === 'none' ? 'block' : 'none')" class="glyphicon" ng-class="{'glyphicon-plus': widget.contentStyle.display === 'none', 'glyphicon-minus': widget.contentStyle.display !== 'none' }"&gt;&lt;/span&gt;
   &lt;/h3&gt;
  &lt;/div&gt;     </code></pre>
  </div>
  </div>
  </p>
  
  <p>and here is the directive's method to handle Maximize:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      $scope.maxResizer = function (e) {
              // TODO: properly restore the window to original position..      
  
              var widget = $scope.widget;
              var widgetElm = $element.find('.widget');
              
              var ht_diff = 200;  // height differential            
  
              widget.setWidth(window.innerWidth);
              $scope.widget.setHeight(window.innerHeight-ht_diff);
  
              $scope.$emit('widgetChanged', widget);            
              $scope.$apply();
              
              $scope.$broadcast('widgetResized', {
                  width: window.innerWidth,
                  height: window.innerHeight-ht_diff
              });
              // this will refresh the chart width within the container - 03/30/2015 BM:  
              kendo.resize($(".k-chart"));
                                      
              var pixelHeight = widgetElm.height();
  
              // kendo chart - refreshes chart height within the container - 03/30/2015 B
              var chart = widgetElm.find('.k-chart').data("kendoChart");
              if (chart != undefined) {
                  chart.setOptions({ chartArea: { height: pixelHeight - (pixelHeight * .10) } });
                  chart.resize($(".k-chart"));
              }
              widget.maximized = true;
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, I have a property set to true/false <code>widget.contentStyle.maximized</code>.</p>
  
  <p>Can someone help me figure out where I'm going wrong ? That is, the Maximize icon remains, and therefore doesn't change to the plus icon.</p>