AngularJS Example:

by harsh dand

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="mainApp">
<ul ng-controller = "MyController">

    <li ng-repeat="l in list">
      {{l.styl}}&nbsp;
    <ul>
      <li ng-repeat="dziecko in l.dzieci | filter:search "  
          ng-class="{active:isActiveTab(dziecko)}" ng-click="openItem(dziecko)">
                                {{dziecko.rodzina}}&nbsp;
                                <b>{{dziecko.page}}</b>
      </li>
   </ul>
   </li>
</div>

JavaScript

var mainApp = angular.module('mainApp', []);

mainApp.controller('MyController',function($scope){
    $scope.list = 
    [  
   {  
      "styl":"nowoczesny",
      "dzieci":[  
         {  
            "id":53,
            "bookmark":true,
            "rodzina":"Nekko",
            "page":1
         },
         {  
            "id":69,
            "bookmark":true,
            "rodzina":"Krak",
            "page":2
         },
         {  
            "id":81,
            "bookmark":true,
            "rodzina":"Oxen",
            "page":3
         },
         {  
            "id":93,
            "bookmark":true,
            "rodzina":"Spirala",
            "page":4
         }
      ]
   },
   {  
      "styl":"klasyczny",
      "dzieci":[  
         {  
            "id":109,
            "bookmark":true,
            "rodzina":"Vello",
            "page":5
         },
         {  
            "id":127,
            "bookmark":true,
            "rodzina":"Renzo",
            "page":6
         },
         {  
            "id":135,
            "bookmark":true,
            "rodzina":"Zenit",
            "page":7
         }
      ]
   }
];
    
    $scope.openItem = function(item) {
        var index = $scope.list.indexOf(item),
                length = $scope.list.length;
        $scope.opened = item;
        $scope.next = $scope.list[index+1];
        $scope.prev = $scope.list[index-1];
    };
});