Filter Angular JS by topic

I was quite entertained doing this until I succeeded, I leave you a codepen so you can see it working Codepen

<button ng-click="anterior();" ng-disabled="anterior_disabled" class="title text-center">Anterior</button>
<button ng-click="siguiente();" ng-disabled="siguiente_disabled" class="title text-center">Siguiente</button>
<br>
<br> Seleccione tema
<select ng-model="tema_select" ng-options="tema as tema.nombre_tema for tema in temas track by tema.nombre_tema">
    <option value="" selected>Todos</option>
</select>
<div ng-repeat="x in names | filter: tema_select.nombre_tema ">
    <h2 class="title">{{x.pregunta}}</h2>
    <p> {{x.respuesta}}</p>
</div>

Controller:

$scope.names = [{
    pregunta: "¿Pregunta 1?",
    respuesta: "Respuesa 1",
    tema: "tema 1"
}, {
    pregunta: "¿Pregunta 2?",
    respuesta: "Respuesta 2",
    tema: "tema 2"
}, {
    pregunta: "¿Pregunta 3?",
    respuesta: "Respuesta 3",
    tema: "tema 3"
}, ];
$scope.temas = [];
$scope.id = 0;
angular.forEach($scope.names, function(value, key) {
    $scope.temas.push({ nombre_tema: value.tema });
});
$scope.clickButton = function(nombre_tema) {
    $scope.tema_select = { nombre_tema: nombre_tema };
}
$scope.siguiente_disabled = false;
$scope.anterior_disabled = true;
$scope.siguiente = function() {
    $scope.tema_select = { nombre_tema: $scope.temas[$scope.id].nombre_tema };
    $scope.id++;
    if ($scope.id == $scope.temas.length) {
        $scope.siguiente_disabled = true;
        $scope.anterior_disabled = false;
        $scope.id--;
    }
}
$scope.anterior = function() {
    console.log($scope.id);
    $scope.id--;
    $scope.tema_select = { nombre_tema: $scope.temas[$scope.id].nombre_tema };
    if ($scope.id == 0) {
        $scope.anterior_disabled = true;
        $scope.siguiente_disabled = false;
        $scope.id++;
    }
}

To make it work, the first thing I did was to do an array of questions that contain Question, answer and a topic. Then I made a $scope.temas arrangement where I separate the themes from the main array only.

I create a <select> to filter by topic with a ng-repeat and making options.

<select ng-model="tema_select" ng-options="tema as tema.nombre_tema for tema in temas track by tema.nombre_tema">
  <option value="" selected>Todos</option>
</select>

Then to the <div> that I repeat the publications I add the filter of ng-model of the selector.

<div ng-repeat="x in names | filter: tema_select.nombre_tema ">
  <h2 class="title">{{x.pregunta}}</h2>
  <p> {{x.respuesta}}</p>
</div>

Then I worked on the buttons, how do you create an array temas each theme has an index, in this case temas[0] = 'tema_1 and so on with the others if there were (I added only 3). Then create a variable $scope.id = 0 that will be the index of this array. When you click on the button Siguiente it searches in the array temas the index for the value of $scope.id that in the first instance is 0, therefore it brings the first and then adds a value $scope.id++ so that when you click again on Siguiente , look for the second element. If the value of $scope.id is equal to $scope.temas.lenght , deactivates the next button and activates the previous one. The same functionality has the button Anterior but here the value of $scope.id is subtracted until reaching 0 which is the last item.

If you find any detail, just let us know!

Use the following:

ng-repeat=" x in names | filter: { pregunta: buscar || respuesta : buscar }