JSFiddle - React, Tailwind, and code Playground

by dreadjr

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="ListController">
        <ul class="nav nav-pills">
            <li ng-repeat="artist in list"> <a show-tab="" ng-href="" ng-click="select(artist)">{{$index}} - {{artist.name}}</a>

            </li>
        </ul>
        <div ng-controller="ItemController">
            <p>{{name}} - {{selected.name}}</p> <span>{{totalSongs}}</span>
 <span>{{selected.songs.length}}</span>

            <ul>
                <li ng-repeat="song in selected.songs" ng-controller="ItemController">{{song}} - {{totalSongs}}</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('myApp', ['myApp.directives']);

app.controller('ListController', ['$scope', function ($scope) {
    $scope.select = function (artist) {
        $scope.selected = artist;
    };

    $scope.list = [{
        name: "Beatles",
        songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]
    }, {
        name: "Rolling Stones",
        songs: ["Ruby Tuesday", "Satisfaction"]
    }];
}]);

app.controller('ItemController', ['$scope', function ($scope) {
    console.log($scope);
    $scope.totalSongs = function () {
        return $scope.songs.length;
    }

    $scope.totalSongs1 = function () {
        return $scope.selected.songs.length;
    }
}]);

angular.module('myApp.directives', [])
    .directive('showTab', function () {
        return {
            link: function (scope, element, attrs) {
                element.click(function (e) {
                    e.preventDefault();
                    $(this).tab('show');
                });
            }
        };
    });