Update: here is the jsfiddle: <http://jsfiddle.net/robertyoung/jwTU2/9/>

I'm building a webpage/app using AngularJS.

The function I want is, when the user add a row to the timecards table, he is able to choose one guy's name from the select picklist, and then the corresponding title of that guy would be shown after the name automatically.

And at the same time, the name and title of that guy need to be bound with another array (timecard.name and timecard.title). Is that possible? I've tried the following code and played around with it without any luck.

```
<div ng-repeat="for timecard in timecards">
  <td> 
     <span class="nullable">
       <select ng-model="timecard.name" ng-options="contact.name for contact in contacts">
         <option value="">Name</option>
       </select>
     </span>
  </td>

  <td> 
    <!-- The title of that corresponding contact should shown here -->
  </td> 

  <td>
    <input ng-model="timecard.totalHours" type="number"/> 
  </td>
</div>

```

In my controller:

```
$scope.contacts = [
   {name:"Jack", title:"Driver"},
   {name:"Mike", title:"Technician"},
   {name:"Lucy", title:"Engineer"}
];
$scope.timecards = [];

```

after the user complete the form, I want the data to look like:

```
$scope.timecards = [
   {name:"Jack", title:"Driver", totalHours:1},
   {name:"Mike", title:"Technician", totalHours:2},
   {name:"Lucy", title:"Engineer", totalHours:3}
];

```