Angularjs: convert standart select to ui-select

Question

I have this select in angularjs that works perfect with my Web Service, but it have so many data, so I need a select searchable. I found the ui-select, and I am trying to convert this code (HTML and app.js) to ui-select:

HTML:

<select class="form-control" id="fabricante" data-ng-model="equipamento.RazaoSocial" ng-disabled="viewMode">
<option ng-repeat="fabricante in fabricantes" value="{{fabricante.RazaoSocial}}">{{fabricante.RazaoSocial}}</option></select>

App.js

// select fabricantes
$scope.fabricantes = [];
$scope.fabricante;// = null;
$scope.fabricantes = gettbfabricante();
gettbfabricante();
function gettbfabricante() {
    EmpApi.gettbfabricante().success(function (response) {
        $scope.fabricantes = response;
    })
    .error(function (error) {
        $scope.status = 'Não foi possível carregar os dados: ' + error.message;
        $window.alert($scope.status);
    });
};

Service.js

//get tbfabricante 
EmpApi.gettbfabricante = function () {
    return $http.get(urlBase + '/tbfabricante')
}

Can anyone help please? I tried to use this Plunker example.

Answer 1

First you need to install ui-select using npm or bower for npm run npm install ui-select and for bower run bower install angular-ui-select

after that in your html write :

 <ui-select ng-model="equipamento.RazaoSocial" ng-disabled ="viewMode">
    <ui-select-match placeholder="Pick one...">{{$select.selected}}</ui-select-match>
    <ui-select-choices repeat="data in fabricantes | filter: $select.search track by data.RazaoSocial">
        {{fabricante.RazaoSocial}}
    </ui-select-choices>
</ui-select>'

Hope this will help you . If you want to learn or add more components in your ui-select refer this url Ui-select documentation