I need an item from my select to be selected, Angular

Question

I have a select component

<div class="form-group col-md-4">
    <label>Entidade:</label> 
        <select ng-model="distrito.entidade.idEntidade" class="form-control">
        <option value="{{dis.entidade.idEntidade}}" ng-repeat="dis in distritos">{{dis.entidade.nome}}</option>
        </select>
</div>

My controller class

app.controller("buscaDistritoController", function($scope, $http) {


    $scope.distritos = [];
    $scope.distrito = {}; // binding com o form

    carregarDistritos = function() {

        token = localStorage.getItem("userToken");


        $http({
            method : 'GET',
            url : 'http://localhost:8080/user/distritos'
        }).then(function(response) {
            $scope.distritos = response.data;

        }, function(response) {
            console.log(response.data);
            console.log(response.status);
        });
    };



    $scope.salvarDistritos = function() {
        if ($scope.frmDistrito.$valid) {
            $http({
                method : 'POST',
                url : 'http://localhost:8080/user/distritos',
                data : $scope.distrito
            }).then(function(response) {
                carregarDistritos();
                $scope.distrito = {};

            }, function(response) {
                console.log(response.data);
                console.log(response.status);
            });

        } else {
             alert("Campos com * são de preenchimento obrigatório");

        }
    };

    $scope.excluirDistritos = function(distrito) {
        bootbox.confirm({
            message : "Deseja excluir o registro permanentemente ?",
            buttons : {
                cancel : {
                    label : '<i class="fa fa-times"></i> Cancelar'
                },
                confirm : {
                    label : '<i class="fa fa-check"></i> Sim'
                }
            },
            callback : function(result) {
                if (result == true) {
                    $http({
                        method : 'DELETE',
                        url : 'http://localhost:8080/user/distritos/'+distrito.id
                    }).then(function(response) {

                        pos = $scope.distritos.indexOf(distrito);
                        $scope.distritos.splice(pos, 1);

                    }, function(response) {
                        console.log(response.data);
                        console.log(response.status);
                    });
                }
            }
        });
    };

    $scope.alterarDistritos = function(dis) {
        $scope.distrito = angular.copy(dis);
    };

    $scope.cancelarAlteracaoDistritos = function() {
        $scope.distrito = {};
    };

    carregarDistritos();

});

I want to always be a selected option, currently shows only one option visible within select and other options that are blank.

what I need is exactly this but only with an option and always this option selected and without the repetition of selects of course.

Answer 1

Eduardo,

The ideal to use in this case is the ng-options, it is a component of Angularjs made especially for popular a Select.
Either way, you NG-MODEL comes zeroed by default, you need to initialize it so it comes something selected.

Plunker Example using NG-OPTIONS

Read more about ng-options here

Any doubt I’m available.