Jquery 如何在AngularJS按钮点击中按按钮值过滤数据？

我正在尝试用固定按钮值搜索数据，就像我单击veg按钮时只想搜索veg类别数据一样。现在我的代码是这样的。 事实上，我是角js代码的新手

First my button code:<butto id="veg" ng-click="myFilter = {type: 1}" title="veg">

My data display code:<div class="side-body padding-top fade in  tab-pane"  id="<?php echo $tt3->id; ?>">
                 <div class="row">
                 <div  ng-if='r.pro_category == <?php echo $tt3->id; ?>' ng-repeat = "r in groups | filter : searchGroups | filter:myFilter">
                    <div>
                        <div class="thumbnail">
                          <div><img src="../@{{r.image }}" alt="" /></div>
                          <div class="caption" style="padding-top:0px;">
                            <div>@{{r.pro_name }}</div>

                               <div>@{{r.price}}</div>

                    </div>
                    </div>
                    </div>

</div>
My script code: <script>
var GroupsApp = angular.module('GroupsApp',[]);
GroupsApp.controller('GroupsController', function ($scope, GroupsService) 
{

    getGroups();
    function getGroups() {
        GroupsService.getGroups()
            .success(function (grps) {
                $scope.groups = grps;

                 return (val.type != 2);

                console.log($scope.groups);
            })
            .error(function (error) {
                $scope.status = 'Unable to load Product data: ' + error.message;
                console.log($scope.status);
            });
    }
});

var url = window.location.pathname;
var productid = url.substring(url.lastIndexOf('/') + 1);
GroupsApp.factory('GroupsService', ['$http', function ($http) {


    var GroupsService = {};
    GroupsService.getGroups = function () {
        return $http.get('../showproduct/'+productid);
    };
    return GroupsService;
}]);

var url = window.location.pathname;
var productid = url.substring(url.lastIndexOf('/') + 1);
GroupsApp.factory('GroupsService', ['$http', function ($http) {


    var GroupsService = {};
    GroupsService.getGroups = function () {
        return $http.get('../showproduct/'+productid);
    };
    return GroupsService;
}]);
</script>

第一个我的按钮代码：
我的数据显示代码：以下是


蔬菜
非素食者|
没有一个

{{{person.name}

功能测试（$范围）{
$scope.persons=[{type:1，名称：'cheese'}，{type:2，名称：'chicken'}，{type:1，名称：'carrot'}，{type:2，名称：'beaf'}]；
$scope.myFunction=函数（val）{
返回值（val.type！=2）；
};
}
请仅包含相关html，删除不必要的类以获得更好的效果readability@devqon我尽可能地对代码进行排序。我输入了您的代码并更改了我的问题，但仍然不起作用
<div ng-app ng-controller="Test">
  <button ng-click="myFilter = {type: 1}">veg</button> | 
  <button ng-click="myFilter = {type: 2}">non veg</button> |
  <button ng-click="myFilter = null">None</button>
  <ul >
    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>
  </ul>
</div>


function Test($scope) {
  $scope.persons = [{type: 1, name: 'cheese'}, {type:2, name: 'chicken'}, {type:1, name: 'carrot'}, {type:2, name: 'beaf'}];
    $scope.myFunction = function(val) {

    return (val.type != 2);
    };
}