Angularjs ui-select value of ng-model

Question

I need to bind a value to ui-select ng-model

the ui-select display categories with icons from JSON response

 <ui-select ng-model="trans.cat" >
       <ui-select-match placeholder="Select a categorie...">
        <img ng-src="{{$select.selected.caticon}}" class="icons"/>
        {{$select.selected.catname}}
       </ui-select-match>
 <ui-select-choices repeat=" cat in categorie | filter: $select.search">
         <img ng-src="{{cat.caticon}}" class="icons"/>{{cat.catname}}
 </ui-select-choices>

My categories response is like this :

{"Categorie":[{"catname":"Taxi","caticon":"img/ic_taxi.png","catvalue":1,"_id":"59eb8faa0a0c7534403cbd0a","__v":0}]

I need to bind the catvalue to the ng-model, i tried many solutions, but i keep getting [object object ] or undefined as result .

My GET request :

 $scope.categorie = [];
            $http.get('http://localhost:3000/api/cat', {withCredentials: true}).success(function(data) {
                $scope.categorie = data.Categorie;
            });

Answer 1

I think you need this,

 <ui-select-choices repeat="cat in categorie.Categorie">
    <img ng-src="{{cat.caticon}}" class="icons"/> 
    <div ng-bind="val.catname "></div>
</ui-select-cfhoices>

DEMO