How to get distinct values from JSON based on Foriegn Key using angularJS
<p>I'm having two JSON Array, $scope.data has the primary details, which I want to show in the UI, in that <code>cInstId</code> is the <code>foreign key</code> from the JSON $scope.color.</p>

<p>The two JSON Arrays are</p>

<pre><code>$scope.data = [
    {
        "id": 1,
        "cTitle": "One",
        "cInstId": 1
    },
    {
        "id": 2,
        "cTitle": "Two",
        "cInstId": 2
    },
    {
        "id": 3,
        "cTitle": "Three",
        "cInstId": 3
    },
    {
        "id": 4,
        "cTitle": "Four",
        "cInstId": 4
    },
    {
        "id": 5,
        "cTitle": "Five",
        "cInstId": 4
    }
];

$scope.color = [
    {
        "cInstId": 1,
        "cInstTitle": "Blue"
    },
    {
        "cInstId": 2,
        "cInstTitle": "Green"
    },
    {
        "cInstId": 3,
        "cInstTitle": "Red"
    },
    {
        "cInstId": 4,
        "cInstTitle": "Orange"
    },
    {
        "cInstId": 5,
        "cInstTitle": "Violet"
    }
];
</code></pre>

<p>My expected output should be as like the picture</p>

<p><a href="https://i.stack.imgur.com/RY9Go.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RY9Go.jpg" alt="enter image description here"></a></p>

<pre><code>&lt;div ng-repeat="members in data"&gt;
    &lt;!-- How to Show it in the UI --&gt;
&lt;/div&gt;
</code></pre>

<blockquote>
  <p>Note: Don't create any temp array and for-each implementation in the
  Controller.</p>
</blockquote>