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

Question

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='')
  form
    md-toolbar
      .md-toolbar-tools
        h2 Propose a Trade
        span(flex='')
    md-dialog-content(style='max-width:800px;max-height:810px; ')
      .md-dialog-content
        p Which of your books would you like to trade for '{{userClickedBook.title}}'?
        p {{selected}}
        md-input-container.md-block
          label(for="mySelect") Your Books
          md-select(name="mySelect", ng-model='selected')
            md-option(ng-repeat="book in usersBooks") {{book.title}}
        div(layout='row')
          md-button(ng-click='cancelDialog()', style='margin-right: 20px;') Cancel
          md-button.md-primary(ng-click='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)?

Answer 1

Won't this work for you?

 <md-option ng-repeat="book in userBooks" ng-value="book">
            {{book.title}}
          </md-option>