title: Angularjs click and display from a list
body: <p>I want to create a simple list and when the user clicks on a button the value is displayed in a span element.</p>
  
  <p><strong>HTML &amp; Controller</strong></p>
  
  <pre><code>&lt;html xmlns:ng="http://angularjs.org"&gt;
  &lt;script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function MyController(){
      this.list = [{name:"Beatles", songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]}, {name:"Rolling Stones", songs:["Ruby Tuesday", "Satisfaction", "Jumpin' Jack Flash"] }]
  
      this.songs = [];
  
  }
  &lt;/script&gt;
  &lt;body ng:controller="MyController"&gt;
  &lt;p&gt;selected: &lt;span ng:bind="selected" ng:init="selected='none'" /&gt;&lt;/p&gt;
      &lt;ul&gt;
          &lt;li ng:repeat="artist in list"&gt;
              &lt;button ng:click="selected = artist.name" &gt;{{artist.name}}&lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!--ol&gt;
          &lt;li ng:repeat="song in songs"&gt;
              {{song}}
          &lt;/li&gt;
      &lt;/ol--&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to dynamically display the list of songs of the clicked artist. Is this the right approach?</p>