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

I edited your plunkr to answer your bonus question:

http://plnkr.co/edit/Yo4xBT?p=preview

Basically you can use the custom-template to do anything you want with the match.

For the main question, my purist nature would be to advise you to to modify the array to be consistent so you would have to search always in name. Just cause you can do so many things with angular doesn't mean that you should do them, so I am speaking from a purely software engineering perspective.

Edit: I like your json data.