title: Transclude creates a separate scope
body: <p>I am using an accordion angularjs library. It has <code>transclude:true</code> on it.</p>
  
  <p>I have a scope variable that I display using the interpolation <code>{{variable}}</code>. When I click on the radio buttons, the value it displays is supposed to change. </p>
  
  <p>I set a default radio button and default variable value on load. But it does not show the respective values in the interpolation when I click on other radio buttons. </p>
  
  <p>This worked before using it with the library. I read that <code>transclude</code> creates a new scope. 
  How do I make this work?</p>
  
  <pre><code>&lt;collapsible-item item-title="Configure Maintenance Bill"&gt;
      &lt;div class="col-md-3"&gt;
         &lt;!-- Group of material radios - option 1 --&gt;
         &lt;div class="form-check"&gt;
            &lt;input type="radio" class="form-check-input" id="x" name="groupOfMaterialRadios" ng-checked="maintenance_bill_rate_type ==='3' &amp;&amp; maintenance_bill_rate_type==='4'"
               ng-model="type" value="expense" ng-change="setCorpusFundDetFn('expense')"&gt;
            &lt;label class="form-check-label" for="materialGroupExample1"&gt;Expenses&lt;/label&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
         &lt;label&gt;
         &lt;input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" ng-disabled="type!='expense'"
            value="3" ng-change="setCorpusFundDetFn()"&gt;
         &lt;/label&gt;
         &lt;span class="align-middle"&gt;Per Flat&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
         &lt;label&gt;
         &lt;input type="radio" name="optradio" ng-model="maintenance_bill_rate_type" value="4" ng-disabled="type!='expense'"
            ng-change="setCorpusFundDetFn()"&gt;
         &lt;/label&gt;
         &lt;span class="align-middle"&gt;Per Sqft&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
         &lt;div ng-class="{'has-error': maintenanceBillForm.corpusFundnm.$invalid &amp;&amp; maintenanceBillForm.$submitted}"&gt;
            &lt;div class="input-group mb-3"&gt;
               &lt;input type="text" class="form-control" ng-model="carpus_fund" ng-pattern="/^(\d)+$/" placeholder="Enter Corpus Fund"
                  aria-describedby="basic-addon2 " name="corpusFundnm" required &gt;
               &lt;div class="input-group-addon"&gt;
                  &lt;span class="input-group-text" id="basic-addon3"&gt;{{corpusFundDet || 'wt'}}&lt;/span&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;collapsible-item&gt;
  </code></pre>