title: Binding array to directive variable in AngularJS
body: <p>I'm trying to get an array into a template so I can use the individuals values thereof. My problem is that the attribute turns into a string once inside my template so it's no longer accessible as {{var[0]}} and that will instead return the first character of the "string", usually "["</p>
  
  <p>Here is a simplified setup of the data:</p>
  
  <pre><code>"varForward": ["100", "1"],
  "varBack": ["1", "100"]
  </code></pre>
  
  <p>Here is a simplified portion of the HTML file that interacts with that data:</p>
  
  <pre><code>&lt;my-customer-vars value="{{varForward}}"&gt;
      &lt;/address-numbers&gt;
  &lt;my-customer-vars value="{{varBack}}"&gt;
      &lt;/address-numbers&gt;
  </code></pre>
  
  <p>and lastly here is a portion that is SUPPOSED to replace the custom tag with my own stuff:</p>
  
  <pre><code>directive('myCustomerVars', function($compile) {
      return {
          restrict: 'E',
          scope: {
              value: "@"
          },
          template:
          '&lt;div&gt;'+
            '&lt;p class="body-text"&gt;Some stuff goes here&lt;/p&gt;'+
            '&lt;input type="text" name="firstinput" value="{{value[0]}}"&gt; - '+
            '&lt;input type="text" name="secondinput" value="{{value[1]}}"&gt;'+
          '&lt;/div&gt;',
          replace: true
      }
  });
  </code></pre>
  
  <p>So here I am, if I try using value[0] I get [  If I try to get value[1] I get " and so on. Is there any help on using arrays inside the template of a directive?</p>