Angularjs - How do I output my custom filters to the dom correctly

Question

How can I best collect the current 'active' filter parameters (like type, price, etc etc) and for each one that angular is filtering by add them to my dom as a li/button/ahref along with the ability to click on the new dom element and remove it as a filter and from the dom.

I have built it out in the link below but when I add a filter it gets added to the dom multiple times. Can't seem to figure it out.

[FIDDLE]

(function(){
//$('.filterList').append('<li>cortney</li>');
var app = angular.module('filter',[]);

app.controller('FilterCtrl',function myFilter($scope){
  $scope.orderByField = 'type';
  $scope.reverseSort = false;
  $scope.filters = [];
  $scope.minprice = 0;
  $scope.filterCars = function(item){
      var index = $scope.filters.indexOf(item);

      if(index == -1) {
          $scope.filters.push(item);
      } else {
          $scope.filters.splice(index, 1);
      }

      //console.log($scope.filters);
  };      
  $scope.filter = function(value) {
    return $scope.filters.length == 0 || ($scope.filters.indexOf(value._type) != -1) && (value._price > $scope.minprice);
  };
  $scope.getTotalFilters = function(){
      //console.log($scope.filters);
      return $scope.filters;
  };
  $scope.showTotalFilters = function(){
      var myfilters = $scope.getTotalFilters();

      $.each(myfilters,function(index,value){
         $('.filterList').append('<li>' + value + '</li>');
      });
      return myfilters

  };

  $scope.data = {
      models: [
          {
           "_name" : "sedan",
           "_ext" : "S Sedan",
           "_type" : "sedan",
           "_body_style": "sedan",
           "_price": "13865",
           "_mpg_city": "28",
           "_mpg_hwy": "36",
           "_fuel_eff": "31",
           "_year": "2014",
           "_seating": 5
         },{
           "_name" : "hatch",
           "_ext" : "S Hatch",
           "_type" : "hatch",
           "_body_style": "hatch",
           "_price": "14365",
           "_mpg_city": "28",
           "_mpg_hwy": "36",
           "_fuel_eff": "31",
           "_year": "2014",
           "_seating": 5
         },{
           "_name" : "suv",
           "_ext" : "SE Sedan",
           "_type" : "suv",
           "_body_style": "suv",
           "_price": "15095",
           "_mpg_city": "28",
           "_mpg_hwy": "36",
           "_fuel_eff": "31",
           "_year": "2014",
           "_seating": 5
         }]
  };
$scope.models = $scope.data.models;


});

})();

Answer 1

The first thing you should avoid is making any references to DOM elements from your controllers, always use binding or a directive for that matter. To illustrate better this should be avoided:

  $scope.showTotalFilters = function(){
      var myfilters = $scope.getTotalFilters();

      $.each(myfilters,function(index,value){
         $('.filterList').append('<li>' + value + '</li>');
      });
      return myfilters

  };

I updated your fiddle to work like you imagined, it is very coupled but I guess you can take a look and get a grasp on how it should be done:

http://jsfiddle.net/dqvadn6r/1/

I hope that I understood correctly.