AngularJS - ui.bootstrap typeahead with an heterogeneous data array

Question

I'm writing a typeahead search bar using ui.bootstrap typeahead and found the component pretty straight forward to use.

My Controller feeds the data into the $scope like this:

var good = [{ name: 'Mario', role: 'sup' },
            { name: 'Luigi', role: 'bro' },
            { name: 'Yoshi', role: 'pet' }]

var bad = [{ badname: 'Bowser', role: 'boss' },
           { badname: 'Sauron', role: 'eye' },
           { badname: 'Jason', role: 'knifer' }]

$scope.data = good.concat(bad)

Then, in the View, I have something like this:

<div class="container-fluid">
    <pre>Model: {{selected| json}}</pre>
    <input type="text" ng-model="selected" typeahead="datum.name for datum in data | filter:$viewValue | limitTo:4">
</div>

This ends up searching in the good guys, but not in the bad (because they have badname instead of name

Is there a way to search for both?

---

Bonus: I would love to show the role of my guys below their name... hints?

---

Edit: I'm aware of this Typeahead using object name to select the entire object, but I was hoping show it in the popup too...

---

Plnkr added here --> http://plnkr.co/edit/KqvUlf

Keep the console open, and you will see the issue about the label I was talking about

Only the good guys shows up, end even then the search throws up an exception when searching for a non existent field in the bad guys

Answer 1

Thanks to @baba I've managed to solve both the main an the bonus issue.

Main Issue

In order to have your data correctly label even with different property names, you can specify multiple labels in the HTML

<div class="container-fluid" ng-controller="TypeaheadCtrl">
  <pre>Model: {{selected| json}}</pre>
  <input type="text" ng-model="selected" 
      typeahead="datum as (datum.name+datum.badname) for datum in data | filter:$viewValue | limitTo:8" 
      typeahead-template-url='tpl.html'>
</div>

This will display one or another, dependent on the data.
Problem is, if both are present, they will both be displayed...

That said, probably the best choice is to create a nicely formatted array for the typeahead, without messing with the code, just like @baba sugggested

---

Bonus Question

Using the match template, the issue is easily solved (for example) like this

tpl.html

    <a>
        {{match.label}}<br>
        {{match.model.role}}
    </a>

Just so.

Thx again guys