<!DOCTYPE html>
<html>

<head></head>

<body ng-app="motoAdsApp" ng-controller="AdvertsController">

  <b>Filter by click</b>
  <div ng-repeat="brand in brands">
    <span>{{brand.name}}</span>
    <span ng-repeat="model in brand.models">
      <a href="" ng-click="addFltr(brand, model)">{{model.name}}</a>
    </span>
  </div>

  <br/>

  <b>Adverts found ({{adverts.length}})</b>

  <table border="1" width="100%">
    <tr>
      <th>Brand</th>
      <th>Model</th>
      <th>Year</th>
    </tr>
    <tr ng-repeat="advert in adverts">
      <td>{{advert.brand}}</td>
      <td>{{advert.model}}</td>
      <td>{{advert.year}}</td>
    </tr>
  </table>

  <script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="script.js"></script>
</body>

</html>
'use strict';

var motoAdsApp = angular.module('motoAdsApp', []);

motoAdsApp.controller('AdvertsController', ['$scope',
  function($scope) {

    $scope.brands = [{
      "name": "Audi",
      "models": [{
        "name": "A1"
      }, {
        "name": "A2"
      }]
    }, {
      "name": "Citroen",
      "models": [{
        "name": "C1"
      }, {
        "name": "C2"
      }]
    }];

    var allAdverts = [{
      "brand": "Audi",
      "model": "A1",
      "year": 2011
    }, {
      "brand": "Audi",
      "model": "A1",
      "year": 2010
    }, {
      "brand": "Audi",
      "model": "A2",
      "year": 2012
    }, {
      "brand": "Citroen",
      "model": "C1",
      "year": 2011,
    }, {
      "brand": "Citroen",
      "model": "C2",
      "year": 2011,
    }];
    
    $scope.fltr = {
      brand: null,
      model: null
    };

    $scope.addFltr = function(brand, model) {
      $scope.fltr.brand = brand.name;
      $scope.fltr.model = model.name;
      console.log('addFltr ' + $scope.fltr.brand + ' ' + $scope.fltr.model);
    };    

    $scope.$watch('fltr', fltrAdverts, true);

    function fltrAdverts() {
      $scope.adverts = [];
      angular.forEach(allAdverts, function(row) {
        if (($scope.fltr.brand && $scope.fltr.brand !== row.brand) || ($scope.fltr.model && $scope.fltr.model !== row.model)) {
          return;
        }
        $scope.adverts.push(row);
        console.log('row ' + row.brand + ' ' + row.model + ' fltr ' + $scope.fltr.brand + ' ' + $scope.fltr.model);
      });
    };
  }
]);