How to search data with ng-click in angular js - angularjs

Question

I want to search data with ng-click function in angularJS, but when I try this code, it doesn't work.
First my button code:
<button 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">
<div>#{{r.pro_name }}</div>
<div>#{{r.price}}</div>
</div>
</div>
</div>
</div>
My script code:
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;
}]);
When I run above code it doesn't show anything.

Answer 1

<button href="#" id="veg" ng-click="myFilter = {active: 1}" title="All Menu Items" class="bbb1 btn btn-info btn-lg " >