JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="minhaRede">
    <div class="button-bar">
      <button ng-click="sortBy('nome_usuario')">Nome</button>
      <button ng-click="sortBy('plano')">Plano</button>
      <button ng-click="sortBy('ciclo')">Ciclo</button>
    </div>
    predicate: {{predicate}}
    <br><br>
    <div ng-repeat="rede in minhaRede.attributes.rede | orderBy:predicate">
      <ion-item ng-repeat="associado in rede.associados" style="border: 1px solid silver;">
        <b>{{associado.nome_usuario}}</b> - {{rede.ciclo}}º Ciclo - {{associado.plano}}<br>
      </ion-item>
    </div>
    
  </div>
</div>


<script>
  angular.module('app',[])
  
  .controller('minhaRede', ['$scope',
  	function($scope) {
			$scope.sortBy = function(field) {
		    $scope.predicate = field;
  		}

      $scope.predicate = "";
      $scope.minhaRede = {
        "id":"1",
        "type":"usuario-redes",
        "attributes":{
          "rede":[{
            "ciclo":1,
            "associados":[{
              "nome_usuario":"João Alfredo",
              "plano": "bronze",
              "associado_situacao":"Ativo",
              "quem_indicou":"thaylon_lomonte",
              "created_at":"2017-05-17T18:03:03.810-03:00"
            },{
              "nome_usuario":"Maria Tomazio",
              "plano": "prata",
              "associado_situacao":"Ativo",
              "quem_indicou":"thaylon_lomonte",
              "created_at":"2017-05-18T18:03:03.810-03:00"
            }]
          },{
            "ciclo":2,
            "associados":[{
              "nome_usuario":"Alberto Alexandre",
              "plano": "prata",
              "associado_situacao":"Ativo",
              "quem_indicou":"joao_alfredo",
              "created_at":"2017-05-21T18:03:03.810-03:00"
            },{
              "nome_usuario":"Roxele Almondega",
              "plano": "ouro",
             ...