ng-repeat multiple value pairs on single element using angular-isotope

I'm using the angular-isotope plugin to repeat multiple quotes in a masonry grid. My goal is to add multiple unique tags to each quote with each tag having its own unique filter class so that when you click the tag, only tags from that filter appear. Currently, the functionality works fine with just a single tag:

single quote

HTML:

<div class="quotes js-masonry" isotope-container="isotope-container">

<div class="quote-col {{item.class}}"  ng-repeat="item in quotes" isotope-item="isotope-item">
    <div class="quote-single">
        <div class="quote-quote">"{{item.quote}}"</div>
        <div class="quote-author">
            <a class="filter-click" data-filter="{{item.dataFilter}}">- {{item.author}}</a>
        </div>
        <div class="quote-bottom clearfix">
            <span class="quote-share">
                <a href="#"><img src="img/icons/facebook.png"></a>
                <a href="#"><img src="img/icons/twitter.png"></a>
            </span> 
            <span class="quote-tags" ng-repeat="?">
                <a class="filter-click" data-filter="{{item.tagFilter}}">{{item.tag}}</a>
            </span>
        </div>
    </div>

</div>

Angular Controller:

var demo = angular.module('angular-isotope-demo', []);

demo.controller('QuoteController', function QuoteController($scope) {
$scope.quotes = [
    {
        "quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.", 
        "author":"Nelson Mandela", 
        "tag": [
            "Leadership",
            "Second Class"
        ],
        "class":"mandela leadership",
        "dataFilter": ".mandela",
        "tagFilter": [
            ".leadership", 
            ".second-class"
        ]
    }
]
});

My question is, how do I repeat that item tag (i.e. "Leadership", "Second Class") and attach it to that ".second-class" in the tagFilter so it looks like this?:

second class image

I hope this is clear to understand.

You will likely have a nested ng-repeat. So turn your quote.tag element into an array and do something like this:

<div ng-repeat="tag in item.tags">
  <a class="filter-click" data-filter="{{tag.filter}}">{{tag.tag}}</a>
  {{ $last ? '' : ( $index < item.tags.length-2 ) ? ', ' : '' }}
</div>

If you wish to have different classes for each item, then I would have another element within item.tags, say item.tags.classes and then do this:

<a class="filter-click" ng-class="tag.classes" data-filter="{{tag.filter}}">{{tag.tag}}</a>

Your data will need to be restructured for this to work:

{
    "quote":"It is better to lead from behind and to put others in front, especially when you celebrate victory when nice things occur. You take the front line when there is danger. Then people will appreciate your leadership.", 
    "author":"Nelson Mandela",
    "tags": [
        {
          "tag":"Leadership",
          "filter":".leadership",
          "classes": "second-class"
        }
    ],
    "class":"mandela leadership",
    "dataFilter": ".mandela",
}