Using md-select, pass the entire object of an ng-repeat item, not just a string


I have made a form with Angular Material that uses a dropdown list to choose from an array of book objects, with names and IDs, for the ultimate purpose of trading it for another book in my collection. Here is what my typical trade object looks like:

var tradeItem = {
  wanted: {
    user: 'barryjohnson',
    bookId: 'foo1bar2'
  offered: {
    user: 'dangraham',
    bookId: 'bar7baz8'

I want to save the entire object to my ng-model in my select menu, so I want the ng-repeat to refer to the entire array object. This way I can make a simple subsequent request to my database.

At the moment it is only saving the title, which is what have inside my md-option tag.

Here is my view:

md-dialog(aria-label='Trade', ng-cloak='')
        h2 Propose a Trade
    md-dialog-content(style='max-width:800px;max-height:810px; ')
        p Which of your books would you like to trade for '{{userClickedBook.title}}'?
        p {{selected}}
          label(for="mySelect") Your Books
          md-select(name="mySelect", ng-model='selected')
            md-option(ng-repeat="book in usersBooks") {{book.title}}
          md-button(ng-click='cancelDialog()', style='margin-right: 20px;') Cancel
'save()', ng-disabled='myForm.$invalid', layout='', layout-align='center end') Ok

So, how can I bind the entire object, so that $scope.selected is like the above object tradeItem, instead of just a single string (the content of md-option)?

Problem courtesy of: alanbuchanan


Won't this work for you?

 <md-option ng-repeat="book in userBooks" ng-value="book">
Solution courtesy of: mindparse


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.