<html ng-app="app">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appCtrl as ctrl">
<div class="filters col-md-12">
<div class="col-md-3 well">
<select name="filter" id="filter" ng-model="filter" ng-options="color for color in carColors" ng-change="changeFilter()"></select>
</div>
<div class="col-md-3 well">
<div class="form-check" ng-repeat="checkbox_for_carmake in carMake">
<label class="form-check-label">
<input type='checkbox' ng-model='f.included'>{{checkbox_for_carmake}}</input>
</label>
</div>
</div>
<div class="col-md-3 well">
<div ng-repeat="a_tag_for_carmodel in carModel">
<ul>
<li>
<a>{{a_tag_for_carmodel}}</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 well">
<a ng-click="resetFilter()" class="filter-reset">Reset Filter</a>
</div>
</div>
<div class="list">
<p class="car" ng-repeat="car in cars | filter: filter | filter:{included:flase}">{{car.make}} {{car.model}} | {{car.color}}</p>
</div>
</body>
</html>
angular.module('app', [])
.controller('appCtrl', function($scope) {
// define list of cars and model and color
$scope.cars = [{make:"Dodge",color:"Blue",model:"Dakota"},{make:"Chevy",color:"Black",model:"Aveo"},{make:"Honda",color:"Black",model:"Accord"},{make:"Toyota",color:"Red",model:"Corolla"},{make:"Dodge",color:"Blue",model:"Stratus"},{make:"Toyota",color:"White",model:"Tacoma"},{make:"Ford",color:"Blue",model:"Focus"},{make:"GMC",color:"Red",model:"Sierra"},{make:"Dodge",color:"White",model:"Dakota"},{make:"Ford",color:"Black",model:"F150"},];
// define list of color
$scope.carColors = ["Black","Blue","Red","White"];
// define list of make
$scope.carMake =["Dodge","Chevy","Honda","Toyota","GMC","Ford"];
//define list of model
$scope.carModel = ["Dakota","Aveo","Accord","Corolla","Stratus","Tacoma","Focus","Sierra","F150"];
// initialize filter object
$scope.filter = {};
// reset the filter
$scope.resetFilter = function() {
// set filter object as blank
$scope.filter = {};
};
});