Angular-UI Bootstrap Typeahead, multiple output?

Question

So I'm using Typeahead to fetch some info from a json file. Got that to work, no problem. But I'd like to "autocomplete" a few other input fields when I've selected an object in the first one.

Let's say the first field looks like this:

<input type="text" class="form-control" id="supertag" ng-model="selected" uib-typeahead="title.title for title in tags | filter:$viewValue | limitTo:8"/>

It displays title.title in that input field, great! I've tried to approach this dilemma in a few ways but I can't seem to populate the rest of the input fields when the first one is selected and ready. I'd like to have something like title.subtitle on the next one but it doesn't seem to be that straight forward.

What am I missing? This doesn't work for example:

<input type="text" class="form-control" id="rubrik" value="{{title.subtitle}}"/>

Thanks!

Edit: The json looks something like this:

{
 title: 'title',
 subtitle: 'subtitle',
 id: 'id'
},
{
 title: 'title',
 subtitle: 'subtitle',
 id: 'id'
},

Edit: Further code for comparison between different json files.

So this is what the input field points to:

$http.get(tagUrl)
        .then(function(res) {
            $scope.tags = res.data;
        })

And onSelect:

$scope.onSelect = function($item, $model, $label) {
        $scope.id = $item.id;
        $scope.title = $item.title;
        $scope.selected = $item.selected;
        $scope.subtitle = $item.subtitle; <- undefined because it only exists in JSON2, not in JSON1.
        console.log($scope.id);
    };

Here is where I'd like the function to do a comparison on the inputs id. It will always exist at JSON1 (tagUrl) but I also want it to look if it exists in JSON2 (superUrl) before going further (and also, if it exists, set $scope.subtitle = $item.subtitle to corresponding input field). I tried different approaches with if statements but at its best, I get undefined.

I have this for a ng-repeat which lists all of the superUrls on the page which might be useful to get what I want.

$http.get(listSuperUrl)
        .then(function(res) {
            $scope.current = res.data;
        })

Answer 1

You need to add a typeahead-on-select="vm.onSelectItem($item, $model, $label) to the supertag input element, (if you are using controller as vm) or typeahead-on-select="onSelectItem($item, $model, $label) (if you are using $scope in your controller). You can name onSelectItem whatever you want, it's a function I used for illustration.

<input type="text" ng-model="subtitle" class="form-control" id="rubrik"/>

Once that is done in your view, go to your controller, define:

vm.onSelectItem = function($item, $model, $label){
  /*bind your subtitle ngModel to $item.subtitle*/
  vm.subtitle = $item.subtitle;
}

or

$scope.onSelectItem = function($item, $model, $label){
 /*bind your subtitle ngModel to $item.subtitle*/
 $scope.subtitle = $item.subtitle;
}

This should do it for you, let me know if it doesn't as I have not tried this in code.