Can't use Angular-UI bootstrap typehead: JSON

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

Please see the functionality you are asking for here:

http://plnkr.co/edit/1Sm17103S73nJbpb2PmK?p=preview

It works for me with the same code you have, what exactly is what you need?

Answer 2

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!

Answer 3

I guess your problem is that you are having hard time working with dynamic data returned from a server. If this is the case than you need to realise that the typeahead directive works great with the promise API and makes working with async results very easy.

This is an example of a function you could use in your controller:

$scope.getUnidades = function($viewValue) {
    return $http.get('Unidades.json').then(function(response){
      return response.data;
    });
  };

and then in your markup:

 <input typeahead="Unidade.Codigo as Unidade.Nome for Unidade in getUnidades($viewValue)" ng-model="selected" >

Here is an example plunk: http://plnkr.co/edit/ibIMDNmK26E4mTdDK5dD?p=preview