Default Value Dropdown Angularjs

Question

In my project I have a dropdown, iterated array. Note that in the array I have a key called default which is set to true or false. I wish the dropdown defalt value was what came with the key set to true.

If I do this: $scope.nfe.naturezaOperacao = $scope.cfops[0];, works, however, I am setting static, I would like you to set the default key according to the default key.

JS:

angular.module('nfe', []).controller('nfeController', function ($scope, $http) {

  $scope.nfe = [];

  $scope.cfops = [
    {codigo: "5.102", descricao : "Venda a vista 12%", elo: "012", default: false},
    {codigo: "5.102", descricao : "Venda a vista 17%", elo: "017", default: true}
  ];


  //$scope.nfe.naturezaOperacao = $scope.cfops[0];
});

---

HTML:

<select
 class="form-control"
 name="NF_NATUREZA_OPERACAO"
 id="NF_NATUREZA_OPERACAO"
 data-ng-model="nfe.naturezaOperacao"
 data-ng-init=""
 data-ng-options="cfop.descricao for cfop in cfops">
</select>

Answer 1

whereas only one object within the array cfops will have the property default with the value true, you can inject $filter in your controller and use the first position returned by this function (I added more objects to the array to illustrate the operation):

angular
  .module('nfe', [])
  .controller('nfeController', function ($scope, $http, $filter) {
    $scope.nfe = [];

    $scope.cfops = [
      {codigo: "5.102", descricao : "Venda a vista 12%", elo: "012", default: false},
      {codigo: "5.102", descricao : "Venda a vista 17%", elo: "017", default: true},
      {codigo: "5.102", descricao : "Venda a vista 10%", elo: "010", default: false},
      {codigo: "5.102", descricao : "Venda a vista 11%", elo: "011", default: false},
      {codigo: "5.102", descricao : "Venda a vista 12%", elo: "012", default: false},
      {codigo: "5.102", descricao : "Venda a vista 13%", elo: "013", default: false}
    ];

    $scope.nfe.naturezaOperacao = $filter('filter')($scope.cfops, { default: true })[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="nfe" ng-controller="nfeController">
  <select
   class="form-control"
   name="NF_NATUREZA_OPERACAO"
   id="NF_NATUREZA_OPERACAO"
   data-ng-model="nfe.naturezaOperacao"
   data-ng-init=""
   data-ng-options="cfop.descricao for cfop in cfops">
  </select>
</div>

Answer 2

This way is incorrect? What would be the best way to do this?

      /* SETA O CFOP PADRÃO */
      for (var i in $scope.cfops) {
        if ($scope.cfops[i].cfop_padrao == true) {
          $scope.nfe.naturezaOperacao = $scope.cfops[i];
        } else {
          $scope.nfe.naturezaOperacao = $scope.cfops[0];
        }
      }

angular
  .module('nfe', [])
  .controller('nfeController', function ($scope, $http, $filter) {
    $scope.nfe = [];

    $scope.cfops = [
      {codigo: "5.102", descricao : "Venda a vista 12%", elo: "012", default: false},
      {codigo: "5.102", descricao : "Venda a vista 17%", elo: "017", default: true},
      {codigo: "5.102", descricao : "Venda a vista 10%", elo: "010", default: false},
      {codigo: "5.102", descricao : "Venda a vista 11%", elo: "011", default: false},
      {codigo: "5.102", descricao : "Venda a vista 12%", elo: "012", default: false},
      {codigo: "5.102", descricao : "Venda a vista 13%", elo: "013", default: false}
    ];

    $scope.nfe.naturezaOperacao = $filter('filter')($scope.cfops, { default: true })[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="nfe" ng-controller="nfeController">
  <select
   class="form-control"
   name="NF_NATUREZA_OPERACAO"
   id="NF_NATUREZA_OPERACAO"
   data-ng-model="nfe.naturezaOperacao"
   data-ng-init=""
   data-ng-options="cfop.descricao for cfop in cfops">
  </select>
</div>