why using select directly in Angular does not bind to selected item?

Question

I am working on testing and understanding the HTML 'select' and 'option'. I went through the document and understood how to create the listboxes in HTML. If you run the following plunker you will see expected be behavior. http://plnkr.co/edit/y5BlZnzQgy1C4DxNHpLl?p=preview
you will see the expected behaviour. It is using the current document in the angular website.
I have two part questions;
1. If you were to enable the commented code and comment out the ng-option, the data binding work and I will see both id and name in the drop down. But why does selectemItem does not bind to the proper index?
2. If I were to stick with the current working example as in plunker, how can I display not only id but also name combination in the list box?

Thanks,

Answer 1

I forked your plunker and implemented both options: http://plnkr.co/edit/ujNeGYvAHdFCDyWpWuHD?p=preview

1. I don't recommend this solution, but I implemented it as "Option 2 (alternative)"

2. That's the way to go, see "Option 1 (recommended)" in the plunker. Use ng-options="c as (c.id + ' - ' + c.name) for c in students" to display both ID and name. Syntax of ng-options is explained in AngularJS documentation: http://docs.angularjs.org/api/ng.directive:select