Show only selected checkbox

Question

Hello, I would like to know how I can do to when clicking the completed tasks button it just present me the selected tasks in the list.

Button Completed Tasks:

<div class="form-group col-xs-3">
    <button class="btn btn-warning btn-block" ng-click="ShowSelected()">Tarefas Concluídas</button>
</div>

List:

    <div ng-repeat="categoria in categorias | filter:BuscarCategoria">
    <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
    <div ng-repeat="tarefa in categoriaTarefa.tarefa[categoria.nome] | filter:BuscarTarefas">
        <input type="checkbox" ng-model="tarefa.selecionado" ng-click="selected(item.id)"   ng-model="modelContainer[$index].checked"/>
        <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
    </div>
</div>

Controller:

angular.module('TarefApp')

.controller('TarefasController', function($scope) {
    $scope.categorias = [
        {nome:'Tarefas Primárias'},
        {nome:'Tarefas Secundárias'},
    ];
    $scope.tarefas = [];
    $scope.categoriaTarefa = {tarefa:{}};     

    $scope.addTarefa = function(tarefa) {
        if(!$scope.categoriaSelecionada){
            alert("Selecione uma categoria!")
            return;
        }

        var c = $scope.categoriaSelecionada;

        if(!$scope.categoriaTarefa.tarefa[c])
        $scope.categoriaTarefa.tarefa[c] = [];
        else{
            var itemDuplicado = false;
            angular.forEach($scope.categoriaTarefa.tarefa[c], function (item, index){
                itemDuplicado = (item.nome === tarefa.nome);
                if(itemDuplicado){
                    alert("Tarefa para categoria já existe!");
                    return false;
                }
            });
        }

        if(!itemDuplicado){
            $scope.categoriaTarefa.tarefa[c].push(tarefa);
            $scope.tarefa = {};
        }
    };

    $scope.delTarefas = function() {
        angular.forEach($scope.categorias, function(item) {
            var c = item.nome;
            var oldTarefas = $scope.categoriaTarefa.tarefa[c];
            $scope.categoriaTarefa.tarefa[c] = [];

            angular.forEach(oldTarefas, function(tar) {
                if (!tar.selecionado) $scope.categoriaTarefa.tarefa[c].push(tar);
            });
        });
    };

    $scope.addCategoria = function(categoria) {
        for(var i=0; i < $scope.categorias.length; i++){
            if($scope.categorias[i].nome === categoria.nome){
                alert("A categoria já existe!");
                return;
            }
        }
        $scope.categorias.push(angular.copy(categoria));
        delete $scope.categoria;
    };
});

Answer 1

You can do the following:

<div ng-repeat="categoria in categorias | filter:BuscarCategoria">
    <h4 ng-model="categoria.selecionado">{{categoria.nome}}</h4>
    <div ng-show="mostrarSomenteSelecionado? tarefa.selecionado : !mostrarSomenteSelecionado" ng-repeat="tarefa in categoriaTarefa.tarefa[categoria.nome] | filter:BuscarTarefas">
        <input type="checkbox" ng-model="tarefa.selecionado" ng-click="selected(item.id)"   ng-model="modelContainer[$index].checked"/>
        <span class="done-{{tarefa.selecionado}}">{{tarefa.nome}}</span>
    </div>
</div>

And at the click of the button:

$scope.ShowSelected = function() {
    $scope.mostrarSomenteSelecionado = true;
};