title: How to get and set an attribute value for a HTML tag using AngularJS?
body: <p>I am trying to find the best way to get &amp; set a value for an attribute in a HTML tag by using AngularJS. Example:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;My WebSite&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
  
      &lt;p&gt;Praragraph1&lt;/p&gt;
  
      &lt;p data-mycustomattr="1234567890"&gt;Paragraph 2&lt;/p&gt;
  
      &lt;p&gt;Paragraph 3&lt;/p&gt;
  
      &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then, when I call the url '/home', I would like to get the value from data-mycustomattr (that I will use for another calculation), and then replace it for "1",</p>
  
  <p>and if the url is '/category', I would like to get the value from data-mycustomattr, and replace it for "2".</p>
  
  <p>With jQuery it is really simple:</p>
  
  <pre><code>$("#myPselector").attr('data-mycustomattr');
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$("#myPselector").attr('data-mycustomattr','newValue');
  </code></pre>
  
  <p>I used that jQuery code, putting it inside my Controllers, and it is working fine. But as far as I read, it might be a bad practice.</p>
  
  <p>However, the solutions I found, which uses Directives, are too big for a such a simple task.
  So I was wondering if combining jQuery and AngularJS at special circumstances may not be too bad after all.</p>
  
  <p>What do you think? Do you have a better solution to get &amp; set attribute's values?</p>
  
  <h2>ANSWER based on Jonathan's reply:</h2>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;My WebSite&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Title&lt;/h1&gt;
  
      &lt;p&gt;Praragraph1&lt;/p&gt;
  
      &lt;p data-mycustomattr="{{mycustomattr}}"&gt;Paragraph 2&lt;/p&gt;
  
      &lt;p&gt;Paragraph 3&lt;/p&gt;
  
      &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then, into the Controllers, I inserted:</p>
  
  <pre><code>$scope.mycustomattr = '1';
  </code></pre>
  
  <p>And for reading:</p>
  
  <pre><code>if ($scope.mycustomattr == '1'){
      // code
  }
  </code></pre>
  
  <p>Tested and working fine.</p>