title: AngularJS: Why won't ng-click set a variable as a value obtained from ng-repeat?
body: <p>I'm trying to give an app the ability to set the font for portion of text based on a list of fonts from Google Fonts.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>&lt;ul ng-init='headerFont="mono"'&gt;
    &lt;li ng-repeat='font in fonts' style='font-family: {{font}};' ng-click='headerFont = font'&gt;{{font}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and then later on:</p>
  
  <pre><code>&lt;h1 style='font-family: {{headerFont}};'&gt;Header&lt;/h1&gt;
  </code></pre>
  
  <p>and in the controller in my js file:</p>
  
  <pre><code>$scope.fonts = [...an array of font names...]
  </code></pre>
  
  <p>Originally, instead of <code>ng-repeat</code> on <code>&lt;li&gt;</code>, I was using:</p>
  
  <pre><code>&lt;select ng-model='headerFont' style='font-family: {{headerFont}};'&gt;
    &lt;option ng-repeat='font in fonts' style='font-family:{{font}};'&gt;{{font}}
    &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And that worked exactly like I wanted it to. But I wanted to try using a scrollable list instead of a drop-down menu because the <code>&lt;select&gt;</code> menu on mobile browsers doesn't support changing fonts of individual options, and it's important to me for the fonts to be able to be previewed before choosing. I figured I could just use <code>ng-click</code> to set the value of <code>headerFont</code>, but it doesn't do anything (no errors show up in the console or anything. Just nothing happens.) Does anyone know why?</p>