title: How to change CSS class of HTML element from inside AngularJS controller logic
body: <p>I'm looking for an example to change CSS class of an HTML element from inside the logic of the AngularJS controller</p>
  
  <p>In the controller, something like this:</p>
  
  <pre><code>function myFunc() {
    //do a calculation
    //result is 3
    //change the class of HTML element with id="3" to add class="hidden"
  </code></pre>
  
  <p>I can't do it with ngClick because the controller decides which element to change, not the user.</p>
  
  <p>Like if I wanted to recreate that <a href="http://en.wikipedia.org/wiki/Simon_%28game%29" rel="nofollow">Simon game</a> from the 80's I would have the controller pick a random number 1-4 and then light up the HTML element and the user would have to click it in a certain amount of time.</p>
  
  <pre><code>choice = Math.floor(Math.random() * 4) + 1;
  if ( choice == 2 ) {
    lightUpBlue();
    setTimeout(turnOffBlue();, 2000);
  }
  </code></pre>
  
  <p>How would I write <code>lightUpBlue()</code> to change the color of a button in the HTML document, and maybe change the hyperlink or some other property?</p>
  
  <p>Thanks in advance. </p>