title: Clearing directive scope variables on $destroy
body: <p>On my radio buttons, I have a directive that binds to the <code>change</code> event and sets the <code>ngModel</code> defined on the element with the radio buttons value. This works fine. </p>
  
  <p>However, the radio buttons can be <s>hidden</s> removed from the DOM based on the user's selection and I want to clear those variables in my controller when this happens. I have a handler for the <code>$destroy</code> event in which I set the scopes <code>ngModel</code> value to <code>undefined</code>. </p>
  
  <p>For some reason setting the scopes value in <code>$destroy</code> is not being changed in my controller while setting it in the <code>change</code> handler does.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div ng-repeat="item in category.items" class="field"&gt;
      &lt;div class="ui radio checkbox"&gt;
          &lt;input type="radio" value="{{item}}" sm-radio-button ng-model="submissions[category.model]" name="{{category.name}}" checked="" tabindex="0" class="hidden"&gt;
          &lt;label ng-bind="item"&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive</strong>:</p>
  
  <pre><code>.directive('smRadioButton', function(){
      return {
          scope: {
              ngModel: '='
          },
          link: function(scope, element, attrs){
  
              //Instantiate checkbox on load and set value to undefined
              element.parent().checkbox();
              scope.ngModel = undefined;
  
  
              element.on('$destroy', function(){
                scope.ngModel = undefined;
              })            
  
              element.on('change', function(e){
                  scope.$apply(function(){
                      scope.ngModel = attrs.value;
                  });
              });
          }
      };
  })
  </code></pre>
  
  <p>Where <code>category</code> is one of many config objects like:</p>
  
  <pre><code>  {
      name: 'Type',
      model: 'type',
      alwaysShow: true,
      items: ['Spending','Bills','Account Transfer','Deposit']
    }, 
  </code></pre>
  
  <p><strong>Note</strong>: I am not using <code>scope.$apply</code> in <code>$destroy</code> because there is already a digest cycle in progress. <code>$destroy</code> is actually being triggered.</p>
  
  <p><strong>Edit</strong>: Tested this on a few other elements, it seems that in <code>$destroy</code> only what appears to be a local scope of that variable is changed? If I reference directly to the controller through <code>scope.$parent</code> the controller variable does change. (This is not ideal since this is several ng-repeats deep which means chaining a bunch of <code>$parent</code>s)</p>