Can't use Angular-UI bootstrap typehead: JSON with multiple attributes

Question

I have a JSON response like this:

{
    "Unidades": [
    {
        "Nome": "laskjdhflksjfg",
        "Codigo": "11106600"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106601"
    },
    {
        "Nome": "wertwertwertwer",
        "Codigo": "11106602"
    }
    ]
}

and I'm trying to use Angular-UI bootstrap typehead doing this:

CONTROLLER

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $http.get($scope.url).success(function (data, status) { 
            $scope.Unidades = data[0].Unidades;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        });
}

HTML

<div  ng-controller="TypeaheadCtrl">        
    <pre>Model: {{selected | json}}</pre>
    <input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control">        
</div>

My problem is: I need that <pre>Model: {{selected | json}}</pre> shows Unidade.Codigo value, and I need that <input type="text" ng-model="selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control"> Shows Unidade.Nome value. How do I do that?

This is what I got:

And this is what I need:

I made this changes by following this example plunk: http://plnkr.co/edit/ibIMDNmK26E4mTdDK5dD?p=preview, but still not working:

HTML

<div class='container-fluid' ng-controller="TypeaheadCtrl">
    <pre>Model: {{Selected| json}}</pre>
    <input type="text" ng-model="Selected" typeahead="Unidade.Codigo as Unidade.Nome for Unidade in getUnidades($viewValue) | filter:$viewValue | limitTo:8" class="form-control" />
</div>

CONTROLLER

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $http.get($scope.url).success(function (data, status) { 
        $scope.Unidades = data[0].Unidades;
    }).error(function (data, status) {
        $scope.response = 'Request failed';
    });
    $scope.getUnidades = function($viewValue) {
        return $http.get($scope.Unidades).then(function(response){
          return data;
        });
      };
}

ERROR

GET http://localhost/[object%20Object],[object%20Object],[…t],[object%20Object],[object%20Object],[object%20Object],[object%20Object] 400 (Bad Request) 

I have also tried doing this:

function TypeaheadCtrl($scope, $http) {
    $scope.selected = undefined;    
    $scope.url = 'unidades/unidades-controler.asp'; //the response of json is from here
    $scope.getUnidades = function($viewValue) {
        return $http.get($scope.url).success(function (data, status) { 
            return data;
        }).error(function (data, status) {
            $scope.response = 'Request failed';
        }); 
    };
}

But I receive this error:

ReferenceError: response is not defined

Answer 1

Ok, this is what I did, and worked.

    <div  ng-controller="TypeaheadCtrl">        
        <pre>Model: {{selected.Codigo | json}}</pre>
        <input type="text" ng-model="selected" typeahead="Unidade as Unidade.Nome for Unidade in Unidades | filter:$viewValue | limitTo:8" class="form-control">        
    </div>

I just changed the typehead to Unidade as Unidade.Nome for Unidade in Unidades and inside the model I'm using only what I need: selected.Codigo

Thank you all!