AngularJS ng-repeat overwrites table results on collapse / expand panels

Question

Ng-repeat is overwriting the results of each row on every click, so I click the panel and I get first table correct:

Id	Scenario
1	User login
2	User Incorrect login

Then, when I click to expand second table, which looks like that:

Id	Scenario
1	User signup

The first table gets messed up and has the same results that the second one.

How can I make the results persist and freely open/close panels?

            <table class="table">
                <thead class="bg-red">
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Feature</th>
                    </tr>
                </thead>
                <tbody ng-init="getListOfFeatures()">
                    <tr ng-repeat="feature in features">
                        <td class="col-md-1">{{feature.id}}</td>
                        <td class="col-md-11">
                            <div class="panel-group">
                                <div>
                                    <a href="javascript:" data-toggle="collapse" data-target="#{{feature.id}}" ng-click="getListOfScenarios(feature.id)">
                                        {{feature.name}}
                                    </a> |
                                    [<a href="#!xxx">edit</a>] |
                                    [<a href="#!xxx">something_else</a>]
                                </div>
                                <div id="{{feature.id}}" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <table class="table">
                                            <thead class="bg-red">
                                            <tr>
                                                <th scope="col">Id</th>
                                                <th scope="col">Scenario</th>
                                                <th scope="col">TestId</th>
                                                <th scope="col">Automated</th>
                                                <th scope="col">Part Of<br> QA WEEK</th>
                                                <th scope="col">Part Of<br> MASTER CUT</th>
                                                <th scope="col">Part Of<br> RELEASE</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr ng-repeat="item in featureScenarios">
                                                <td class="col-md-1">{{item.id}}</td>
                                                <td class="col-md-4">{{item.name}} [<a href="#!xxx">edit</a>]</td>
                                                <td class="col-md-1">{{item.tc}}</td>
                                                <td class="col-md-1">{{item.automated}}</td>
                                                <td class="col-md-1">{{item.part_of_qa_week}}</td>
                                                <td class="col-md-1">{{item.part_of_master_cut}}</td>
                                                <td class="col-md-1">{{item.part_od_release}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

        $scope.getListOfFeatures = function() {
            $http.get("http://localhost:63342/qa-dashboard/features_api.json")
                .then(function successCallback(response){
                    $scope.response = response.data;
                    $scope.features = response.data.features;
                }, function errorCallback(response){
                    console.log("Unable to perform get request");
                });
        }

        $scope.getListOfScenarios = function(featureId) {
            $http.get("http://localhost:63342/qa-dashboard/scenarios_api.json")
                .then(function successCallback(response){
                    $scope.response = response.data;
                    $scope.scenarios = response.data.scenarios;
                    $scope.featureScenarios = [];

                    for (var scenario in $scope.scenarios) {
                        var s =$scope.scenarios[scenario];
                        if(s.feature_id === featureId) {
                            $scope.featureScenarios.push(s)
                        }
                    }

                    console.log($scope.featureScenarios)

                }, function errorCallback(response){
                    console.log("Unable to perform get request");
                });
        }

{
  "scenarios": [
    {
      "id": "1",
      "feature_id": "1",
      "name": "User login",
      "tc": "TC787848",
      "automated": "true",
      "part_of_qa_week": "false",
      "part_of_master_cut": "false",
      "part_od_release": "false"
    },
    {
      "id": "2",
      "feature_id": "1",
      "name": "User incorrect login",
      "tc": "TC334343348",
      "automated": "true",
      "part_of_qa_week": "false",
      "part_of_master_cut": "false",
      "part_od_release": "false"
    },
    {
      "id": "3",
      "feature_id": "2",
      "name": "User sign up",
      "tc": "TC34834348",
      "automated": "true",
      "part_of_qa_week": "false",
      "part_of_master_cut": "false",
      "part_od_release": "false"
    }
  ]
}

{
  "features": [
    {
      "id": "1",
      "name": "Login Screen"
    },
    {
      "id": "2",
      "name": "Sign Up Screen"
    },
    {
      "id": "3",
      "name": "Reset Password Screen"
    }
  ]
}