在AngularJs中，如何根据从下拉列表中选择的值来控制视图

我的Json数据是:

[{
    "objective": "My obj",
    "score": 9,
    "status": "active",
    "quarter": "Q1",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "175323"
    ],
    "key_results": [{
        "result": "resut11",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "On time"
    }]
}, {
    "objective": "My second obj",
    "score": 5,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "175223"
    ],
    "key_results": [{
        "result": "resut21",
        "status": "Pending"
    }, {
        "result": "result22",
        "status": "On time"
    }]
}, {
    "objective": "My third objective",
    "score": 3,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "C",
    "owner_ids": [
        "15323"
    ],
    "key_results": [{
        "result": "resut31",
        "status": "Pending"
    }, {
        "result": "result12",
        "status": "Pending"
    }]
}, {
    "objective": "My fourth objective",
    "score": 3,
    "status": "active",
    "quarter": "Q2",
    "year": "2015",
    "team": "A",
    "owner_ids": [
        "17598"
    ],
    "key_results": [{
        "result": "resut41",
        "status": "Pending"
    }, {
        "result": "result42",
        "status": "On time"
    }]
}, {
    "objective": "My fifth objective",
    "score": 5,
    "status": "active",
    "quarter": "Q3",
    "year": "2016",
    "team": "B",
    "owner_ids": [
        "13298"
    ],
    "key_results": [{
        "result": "resut51",
        "status": "Pending"
    }, {
        "result": "result52",
        "status": "On time"
    }]
}, {
    "objective": "My sixth objective",
    "score": 7,
    "status": "active",
    "quarter": "Q4",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut61",
        "status": "Pending"
    }, {
        "result": "result62",
        "status": "On time"
    }]
}, {
    "objective": "My seventh objective",
    "score": 7,
    "status": "active",
    "quarter": "Q3",
    "year": "2015",
    "team": "B",
    "owner_ids": [
        "1328"
    ],
    "key_results": [{
        "result": "resut71",
        "status": "Pending"
    }, {
        "result": "result72",
        "status": "On time"
    }]
}]

在我看来，我是在表中显示数据以及计算最终分数的平均值。

我能够显示并平均所有数据，现在我需要根据年和季度过滤数据。

查看页面:

<h3>Overall Score: {{calculateAverage(xyz)}}</h3>
<tbody>
    <tr ng-repeat="entries in xyz">
        <td>{{$index + 1}} </td>
        <td>{{entries.objective}}</td>
        <td>{{entries.key_results[0].result}}</td>
        <td ng-class="{'text-success': entries.key_results[0].status == 'Pending', 'text-danger': entries.key_results[0].status == 'On time' }">
            {{entries.key_results[0].status}}
        </td>
        <td>{{entries.final_score}}</td>
        <td>{{entries.owner_ids[0]}}</td>
        <td>
            <a class="btn btn-sm btn-success" ng-click="/#/mypage/{{entries.owner_ids[0]}}"> View It </a>
        </td>
    </tr>
</tbody>

控制器:

$scope.xyz = myservice.query();
$scope.calculateAverage = function (MyData) {
    //console.log(MyData);
    var sum = 0;
    for (var i = 0; i < MyData.length; i++) {
        var sum = sum + MyData[i].final_score;
    }
    var avg = sum / (MyData.length);
    //console.log(avg);
    return avg.toFixed(2);
};

在所有数据的基础上还有其他显示。

我实现了下拉框

<div class="col-lg-3">
    <h4>Year:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>2015</option>
    </select>
</div>
<div class="col-lg-3">
    <h4>Quarter:</h4>
    <select class="form-control" id="sel1" style="max-width:150px; margin-top:19px">
        <option>Q3</option>
        <options>Q4</options>
    </select>
</div>

它应该显示不同的年份以及不同的月份和选择，它可以过滤json数据，是否可以改变视图的其余部分，这是基于这个整体数据取决于从下拉选择的值?就像将季度更改为Q3或将年度更改为2015一样，表中的显示和平均值也相应更改，有许多依赖于整体数据的视图页面，这个过滤器只是介绍，如果可以根据下拉选择更改数据范围，我不想更改各种功能，寻找方法来实现这一点?