Creating wrapper DIV using loops and ng-class in AngularJS

Here is the general idea:

This is similar to paging. Get the decade from all your records (events) and then group them into pages (one per decade). Once your repeater relies on this eventsByDecade array, angularjs will do all the heavy lifting.

Here are some guidelines:

After you populate your events variable with your json file, create an array and populate it depending on the dates. For this you will need to check event.theDate.getFullYear() on each event.

Then, depending on the year you can then get the decade, maybe using year.substring(0,2) (use just the first 3 digits).

Next, group them by decade in an array and then assign each decade array into a master eventsByDecade array.

Finally, change your repeater from:

ng-repeat="event in events | filter:query | orderBy:orderProp:true"

to use your "paged" array:

ng-repeat="event in eventsByDecade[currentIndex] | filter:query | orderBy:orderProp:true"

Here, currentIndex will be set whenever the links are clicked, for example:

<li><a href="#decade-1960s" ng-click="currentIndex = 1">1960</a></li>

Update: Manipulating json

JSON Evaluates to JavaScript Objects. So you can iterate over your events like this:

for(var event in events){
 event.theDate; //this object should have properties such as the date
}