Listing information with select

Question

I have already opened a question of this here and a user of the site helped me, and cleared my doubts. However, when trying to use the code again that he presented me, the same is presenting errors. He presented me the code with States, and I modified it to Neighborhoods (clean code because the information will be put yet.)

The code is as follows::

<script>
(function() {
  'use strict';

  angular
.module('appBairros', []);

  angular
.module('appBairros')
.controller('BairroController', BairroController);

  BairroController.$inject = [];

  function BairroController() {
var bairro = this;
bairro.opcoes = [];

iniciar();

function iniciar() {
  bairro.opcoes = [];
  bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
  bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

  bairro.seleciona = bairro.opcoes[0];
}
  }
    })();

<div ng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairo.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

He should present like this:

And when I run my code, it presents that way:

Answer 1

your error is within the function iniciar() in bairro.seleciona = bairro.opcoes[0]; must be bairro.selecionado = bairro.opcoes[0]; and also change ng-model="bairo.selecionado" for ng-model="bairro.selecionado" being bairro and not bairo

(function() {
  'use strict';

  angular
  .module('appBairros', []);

    angular
  .module('appBairros')
  .controller('BairroController', BairroController);

  BairroController.$inject = [];

  function BairroController() {
    var bairro = this;
    bairro.opcoes = [];

    iniciar();

    function iniciar() {
      bairro.opcoes = [];
      bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
      bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

      bairro.seleciona = bairro.opcoes[0];
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

<div ng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}

Answer 2

Two small typing errors.

• In the controller, where it reads bairro.seleciona = bairro.opcoes[0]; should be read bairro.selecionado = bairro.opcoes[0];
• In the view, where it reads ng-model="bairo.selecionado" should be read ng-model="bairro.selecionado"

With these two fixes the code works, as can be seen in the version below:

angular.module('appBairros', []);

angular.module('appBairros').controller('BairroController', BairroController);

BairroController.$inject = [];

function BairroController() {
var bairro = this;
bairro.opcoes = [];

iniciar();

function iniciar() {
bairro.opcoes = [];
bairro.opcoes.push({nome: "Botafogo", informacoes: "Botafogo é um bairro     que começa com B"});
bairro.opcoes.push({nome: "Madureira", informacoes: "Madureira é um bairro     que começa com M"});

bairro.selecionado = bairro.opcoes[0];
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appBairros">
<div ng-controller="BairroController as bairro">
<label class="bairros">Selecione o Bairro para exibir as informações que             deseja.</label>
<select ng-options="opcao.nome for opcao in bairro.opcoes" ng-model="bairro.selecionado"></select>

<br>
<br>

{{bairro.selecionado.informacoes}}