Ascending and descending order Angularjs

Question

I have a set of data that I organize through a choice, increasing or decreasing, or I can leave in the order that is already. The system works normally with the order of the elements, the problem is that the elements are only being shown when the sample order, ascending or descending, is selected in a select.

I would like to resolve the question: how to show the elements without the need to select the sample order so that this selection is actually optional?

<select ng-model="selectedChoice">
  <option ng-repeat="choice in choices" value="{{choice.name}}" ng-init="Todos">{{choice.name}}</option>
</select>

<div ng-if="selectedChoice == 'Crescente'">
  <div class="col-12">
    <div class="col-4 ladolado" ng-repeat="organ in organs | orderBy: '+name' " ng-if="organ.attachment.url != null">
      <a href="{{organ.url}}" class="decoracao section">
        <img ng-src="{{organ.attachment.url}}" border="0" />
        <span><br><p>{{organ.name}}</p>
	  <small class="zero">quantidade de serviços : {{organ.services.length}}</small>
	</span>
      </a>
      <br/>
      <br/>
    </div>
  </div>
  <div class="col-12">
    <div class="col-4 ladolado" ng-repeat="organ in organs | orderBy: '+name'" ng-if="organ.attachment.url == null">
      <a href="{{organ.url}}" class="decoracao section">
        <img src="/assets/layout/missing1.png" border="0" /><span><br><p>{{organ.name}}</p>
<small class="zero">quantidade de serviços : {{organ.services.length}}</small></span>
      </a>
      <br/>
      <br/>
    </div>
  </div>
</div>

$scope.choices = [{
  name: "Crescente"
}, {
  name: "Decrescente"
}];

Answer 1

The first thing is that you are forcing the ordination on HTML. When you have a dynamic ordering it becomes easier to do and cleaner to do it on controller. Secondly you have a ng-if and this limits the view only to the "Crescent" option. Follow an example of how you can do it dynamically.

(function() {
  'use strict';

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

  angular
    .module('appExemploOrdenacao')
    .controller('OrdenacaoController', OrdenacaoController);

  OrdenacaoController.$inject = ['$filter'];

  function OrdenacaoController($filter) {
    var ordenacao = this;
    var servicos = [];

    ordenacao.opcoes = [];

    ordenacao.organizar = organizar;
    
    iniciar();
    
    function iniciar() {
      servicos.push({nome: 'Serviço 1'});
      servicos.push({nome: 'Serviço 12'});
      servicos.push({nome: 'Serviço 123'});
      servicos.push({nome: 'Serviço 12345'});
      servicos.push({nome: 'Serviço 123457'});
      servicos.push({nome: 'Serviço 123456'});      
      servicos.push({nome: 'Serviço 1234578'});
      servicos.push({nome: 'Serviço 1234'});
      
      ordenacao.opcoes = [{name: ''}, {name: 'Crescente'}, {name: 'Decrescente'}];
    }

    function organizar() {
      if (ordenacao.selecionado.name === 'Crescente') {
        return $filter('orderBy')(servicos, '+nome');
      } else if (ordenacao.selecionado.name === 'Decrescente') {
        return $filter('orderBy')(servicos, '-nome');
      } else {
        return servicos;
      }
    }
  }
})()

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appExemploOrdenacao">
  <div ng-controller="OrdenacaoController as ordenacao">
    <select ng-init="ordenacao.selecionado = ordenacao.opcoes[0]"
            ng-options="opcao.name for opcao in ordenacao.opcoes"
            ng-model="ordenacao.selecionado">
    </select>
    
    <div ng-repeat="servico in ordenacao.organizar()">
      {{servico.nome}}
    </div>
  </div>
</div>