title: In AngularJS, how do I use a directive to create a template with changing variable names?
body: <p>I'm creating a questionnaire form using AngularJS, and I'm templatizing the different types of questions I have to keep my HTML lightweight.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;qtnyesno qtn-variable="testVar"&gt;This is a test question. Yes or No?&lt;/qtnyesno&gt;
  testVar = {{testVar}}
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var module = angular.module('app', [])
  .directive('qtnyesno', function() {
          return {
                  restrict: 'E', // must be an HTML element
                  transclude: true,
                  scope: {
                          valvar: '@qtnVariable',
                  },
                  template:
                      '&lt;div&gt;' +
                      '&lt;label ng-transclude&gt;&lt;/label&gt;' +
                      '&lt;label class="radio inline"&gt;&lt;input type="radio" name="rdo{{valvar}}" value="1" ng-model="{{valvar}}"&gt;Yes &lt;/label&gt;' +
                      '&lt;label class="radio inline"&gt;&lt;input type="radio" name="rdo{{valvar}}" value="0" ng-model="{{valvar}}"&gt;No &lt;/label&gt;' +
                      '&lt;hr&gt;&lt;/div&gt;',
                  replace: true,
          };
  });
  </code></pre>
  
  <p>When I use within the input tag <em>ng-model="{{valvar}}"</em> I get compilation errors.</p>
  
  <p>When I try using instead <em>ng-click="{{valvar}} = 0"</em> I get no compilation errors, but my display statement to get the value of testVar never works when I click on the radio buttons.</p>
  
  <p><strong>How would I fix this such that the last line of my HTML gets properly updated with the value of testVar when I click on the buttons?</strong></p>
  
  <p>I'm using AngularJS along with Bootstrap.  I'm fairly new to both frameworks, so I'm not sure if this is even the best way to go about doing this.</p>