使用javascript将复选框更改为可设置动画的按钮

Question

我正在构建一个练习应用程序。我有一个使用复选框和单选按钮的工作过滤系统。我需要一种方法来替换它我可以设置动画的按钮。对于我的插件，我将使用带有文本的按钮，但是然后离线我将用图像替换它们。以下是我的工作样本：

HTML

        <h2>Type</h2>
        <label class="btns">
            <input type="radio" name="vegMeat" value="" ng-model="type.searchVeg" ng-checked="true">All
        </label>
            <label class="btns">
                <input type="radio" name="vegMeat" value="veg" ng-model="type.searchVeg">Vegetarian
            </label>
            <label class="btns">
                <input type="radio" name="vegMeat" value="meat" ng-model="type.searchVeg">Meat
            </label>

    </div>

的JavaScript

  .filter('searchType', function() {
return function(foods, search) {
  var filtered = [];
  if (!search) {
    return foods;
  }
  angular.forEach(foods, function(food) {

    if (angular.lowercase(food.type).indexOf(angular.lowercase(search)) != -1) {
      filtered.push(food);
    }
  });
  return filtered;
};

样品插入 https://plnkr.co/edit/xk1VcCfAsVknyahux4fw?p=preview

PS我知道我不是最有效的方式，但我还是初学者。按钮是我主要关注的问题，但如果有人对如何改进代码本身有任何建议，请随时提供一个示例。这只是我的一个样本。我的全套还有另外5套按钮和更多食谱。