Using a selected value in <option> Angular.js

Question

I am just beginning to learn using Angular.js but I couldn't figure out this one:

I want to show items from the array where the selected value ="song.title" matches the song.title from the array.

This is my code

<select>
     <option ng-repeat="song in songs.tracks">{{song.title}}</option>
</select>

Now I wanna show more of the selected songs array in this :

<section ng-repeat="song in songs.tracks">
     <div class="panel" ng-show="panel.isSelected(1)" >

<!-- in here i wanna show stuff from the array of the selected song -->

     </div>

Answer 1

So, first of all You have to attach model to your select tag, to do it use ng-model directive. In option tag set attribute value="{{song.id}}" so your model will contain selected song id.

Second thing, your loop displaying div with stuff from array is wrong, because in each loop you pass 1 to your isSelected method. Better is isSelected($index) . But you don`t have to do this loop, just use your model containing selected id in songs array

<div>{{songs[yourmodel].title}}</div>

Answer 2

Checkout this

 <div>
  Select Song :: <select ng-model="selectedSong" ng-options="song as song.title for song in songs.tracks">
  </select>

  </div>
  <div>
  Selected Song :: 

  {{selectedSong}}
  </div>