I currently have two lists which are being compared. One displays a list of colors and the other is a list of names that have chosen a specific color. This is simple to display. An example fiddle can be found here: <https://jsfiddle.net/37dq96tj/>

```
<div ng-repeat="eachColor in colors">

    {{eachColor.name}} Selected By: ->

    <span ng-repeat="eachName in names" ng-if="eachName.catid == eachColor.id">
          {{eachName.name}}
    </span>
</div>

```

The problem I am facing which I thought would be easy to do, would be to display the word "none" if no name is listed for that color. I thought I could do it this way which works if only one name is in the 2nd list. See: <https://jsfiddle.net/37dq96tj/2>

```
{{eachColor.name}} Selected By: ->

<span ng-repeat="eachName in names">
    <span ng-if="eachName.catid == eachColor.id">{{eachName.name}}</span>
    <span ng-if="eachName.catid != eachColor.id">NONE</span>
</span>

```

But if I add another name, this will not work. I'll end up getting duplicates "NONE" values. See: <https://jsfiddle.net/37dq96tj/4>

This seems simple, but I haven't figured it out. Hoping someone can point me in the right direction.

Also, another question I'd definitely like to know is using nested ng-repeats this way is the ideal way to display this type of data?

Thanks!
T