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>
<ion-item ng-repeat="associado in redeExibir | orderBy:predicate" style="border: 1px solid silver;">
<b>{{associado.nome_usuario}}</b> - {{associado.ciclo}}º Ciclo - {{associado.plano|plano}}<br>
</ion-item>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('minhaRede', ['$scope',
function($scope) {
$scope.sortBy = function(field) {
$scope.predicate = field;
}
$scope.planos = {
'ouro': 1,
'prata': 2,
'bronze': 3
};
$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"
}]
...