title: Angular JS - bind a custom html attribute
body: <p>I'm just starting with Angular JS and i find it very handy in terms of data handling.</p>
  
  <p>My question, is it possible to bind a custom attribute by html alone? Specifically with the select element. </p>
  
  <p>Instead of getting the value attribute, i want to get a custom attribute from the option tags under select element.</p>
  
  <p>Just to be clear, instead of displaying the "value" of the input element, i want to display what's inside the data-custom1 which is the word "payment".</p>
  
  <p>Example would be:</p>
  
  <pre><code>&lt;select ng-model="colors"&gt;
  &lt;option data-color-hex="#2ba2ba" value="1"&gt; Color A&lt;option&gt;
  &lt;option data-color-hex="#222222" value="2"&gt; Color B&lt;option&gt;
  &lt;option data-color-hex="#cacaca" value="3"&gt; Color X &lt;option&gt;
  &lt;/select&gt;
  
  &lt;p&gt;{{display the data-color-hex value here}} &lt;/p&gt;
  </code></pre>
  
  <p>If i select an option from the select element, the data-color-hex is displayed
  in the <p> element instead of value 1,2,3.</p>