Several <option> in <select> to change location where the ng-repeat get data

Question

My goal is to let the user choose which array inside the Object that shall be iterated and showing data in the DOM.

So there is 17 different card sets, and inside these arrays are all the cards for that type. At the moment when i set a limitTo: 2, i get 2 cards from each set. So, 2 from Basic, 2 from Battlegrounds etc.

I want the user to choose which of these card sets to iterate through so only the amount limitTo is set to of that specific cardSet

my HTML:

<select ng-model="statsSortering">                        
    <option ng-selected="sortBy('card.name')" value="name" selected>Namn</option>
    <option ng-selected="sortBy('card.attack')" value="attack">attack</option>
    <option ng-selected="sortBy('card.cost')" value="cost">Kostnad</option>
</select>

<div ng-repeat="(key, cardArr) in dataObj">
    <ul>
        <li ng-repeat="card in cardArr | orderBy: statsSortering | limitTo: 10">
            <span>{{card.name}}</span>
            <p>{{card.cardSet}}, {{card.type}}, {{card.playerClass}}</p>
        </li>
    </ul>
</div>

My Controller:

var produkterControllers = angular.module('myApp', [])

.controller('minApiFunktionController', function myController($scope, $http) {
    var url = "https://omgvamp-hearthstone-v1.p.rapidapi.com/cards";
    var headers = {
        "x-rapidapi-host": "omgvamp-hearthstone-v1.p.rapidapi.com",
        "x-rapidapi-key": "8ad5a16c67mshed80ba15c31ab54p141ec5jsnfbff6480fd40"
    };
    var options = {
        headers
    };

    $http.get(url, options)
        .then(function (response) {
            var data = response.data;
            console.log('this is the data, ', data);
            $scope.dataObj = data;
            $scope.statsSortering = "name";
        });
});

So to summarize this i would like the options in the select menu to alter the card in cardArr ro change into cardarr.Basic to just iterate through the Basic cards,

I want to taget the code inside:

<li ng-repeat="card in cardArr | orderBy: statsSortering | limitTo: 10">

Here is an example of the Data collected

Answer 1

To select a specific card set use:

<select ng-model="cardSetName">
    <option value="">Select Card Set...</option>
    <option ng-repeat="(key, value) in dataObj" ng-value="key">{{key}}</option>
</select>

<select ng-model="statsSortering">                        
    <option value="name" selected>Namn</option>
    <option value="attack">attack</option>
    <option value="cost">Kostnad</option>
</select>

<ul>
    <li ng-repeat="dataObj[cardSetName] | orderBy: statsSortering | limitTo: 10">
        <span>{{card.name}}</span>
        <p>{{card.cardSet}}, {{card.type}}, {{card.playerClass}}</p>
    </li>
</ul>