Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
    <select ng-change="showSpec(car.id)" ng-init="car = carsList[0]" ng-model="car" ng-options="car.name for car in carsList"></select>
    <select>
      <option ng-repeat="primitive in specifications" id="{{primitive.id}}">{{primitive.name}}</option>
    </select>
  </body>

</html>

// Code goes here

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

app.controller('myController', function($scope){
  $scope.carsList = [{
    "name": "Ferrari",
    "made": "Germany",
    "id": "1"
  },
  {
    "name": "VW",
    "made": "Germany",
    "id": "2"
  },
  {
    "name": "Jaguar",
    "made": "Germany",
    "id": "3"
  }]
  
  $scope.showSpec = function(id) {
    $scope.allSpecifications = [{
      "id": "1",
      "name": "ferrari model 2"
    },
    {
      "id": "1",
      "name": "ferrari model 1"
    },
    {
      "id": "3",
      "name": "Jaguar model 1"
    },
    {
      "id": "3",
      "name": "Jaguar model 2"
    },
    {
      "id": "2",
      "name": "VW model 1"
    },
    {
      "id": "2",
      "name": "VW model 2"
    }]
    $scope.specifications = [];
    angular.forEach($scope.allSpecifications, function(spec) {
      if(spec.id == id) {
        console.dir(spec)
        $scope.specifications.push(spec)
      }
    })
  }
});

/* Styles go here */