How to show proprty from array by keys from anther array

I am trying to show data from 2 array based on same key, the example is

firstArray

[{$id='12321',name='test'},{$id='12312',name='test'},{$id='1234',name='test'}]

second array:

[{$id='12321',value=4},{$id='12312',value=2}]

how can I display with ng-repeat the first array and if second have this id to show the value.

I tried to do

 <div ng-repeat="qu in vm.qus">
                <div ng-repeat="max in vm.maxs | filter :{ max.$id === qu.$id } ">

the error:

Error: [$parse:syntax] Syntax Error: Token '.' is unexpected, expecting [}] at column 34 of the expression

Solution

You can use ng-if,

 <div ng-repeat="qu in vm.qus">
    <div ng-repeat="max in vm.maxs" ng-if="max.$id ===qu.$id">
      {{max}}
    </div>
  </div>

DEMO

var app = angular.module('app', []);
app.controller('demoCtrl', ['$scope', function($scope) {
  vm = this;
  vm.qus = [{
    $id: '12321',
    value: 4
  }, {
    $id: '12312',
    value: 2
  }];

  vm.maxs = [{
    $id: '12321',
    value: 4
  }, {
    $id: '12312',
    value: 2
  }]
}]);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body ng-app="app" ng-controller="demoCtrl as vm">
  <div ng-repeat="qu in vm.qus">
    <div ng-repeat="max in vm.maxs" ng-if="max.$id ===qu.$id">
      {{max}}
    </div>
  </div>
  <script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
  <script type="text/javascript " src="MainViewController.js "></script>
</body>

</html>