JSFiddle - React, Tailwind, and code Playground

by Juan Zamora

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container" ng-app="myApp">
    <div class="row">
        <div class="span12">
            <div class="head">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="span6">
                             <h1 class="muted">Umbrella Corporation</h1>

                        </div>
                        <div class="span4 offset2" style="margin-top:15px;">
                            <button class="btn pull-right" type="button">Sign In</button>
                        </div>
                    </div>
                </div>
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container" ng-controller="navigationController">
                            <ul class="nav">
                                <li> <a href="#" ng-click="setPage(1)">Virus Specialist</a>

                                </li>
                                <li> <a href="#" ng-click="setPage(2)">Zombie Apocallypse</a>

                                </li>
                                <li> <a href="#" ng-click="setPage(3)">Contact Us</a>

                                </li>
                                <li> <a href="#" ng-click="setPage(4)">Run Forest</a>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span12">
            <div>
                <div ng-controller="contentController">
                    <div>
                        <div ng-repeat="p in pages | filter:{index : current.page}">
                            <div>
                                 <p>You are...

JavaScript

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

app.service('pageService', function () {

    var current = {
        page: 1
    };

    var pages = [{
        index: 1,
        title: 'Best Specialists',
        thumbDesc: 'Our business is life it self',
        thumbShort: 'A team of specialist is looking to work for and with you',
        url: 'https://i.ytimg.com/vi/isosE4Bowh0/maxresdefault.jpg'
    }, {
        index: 2,
        title: 'Your Tomorrow, Today',
        thumbDesc: 'Working hard to develop tomorrows technology',
        thumbShort: 'preserving health of the people',
        url: 'http://www.girlsofwar.com.br/wp-content/uploads/2011/08/UMBRELLA.jpg'
    }, {
        index: 3,
        thumbDesc: 'We are currently performing internal team building!',
        thumbShort: 'we will be back tomorrow at 8:30am',
        title: 'We are Sorry our Offices are closed today!',
        url:'http://th09.deviantart.net/fs70/PRE/f/2012/279/a/4/umbrella_corporation_soldier_by_greentechnology-d5gystt.jpg'
    }, {
        index: 4,
        thumbDesc: 'Just run',
        thumbShort: 'run forest',
        title: 'Yep Buddy you better be running by now!',
        url: 'http://www.shitzombiessay.net/blog/wp-content/uploads/2013/08/survivor.jpg'
    }, ];

    return {
        getPages: function () {
            return pages;
        },
        getPage: function () {
            for (var i = 0; i < pages.length; i++) {
                if (pages[i].index = current) {
                    return [pages[i]];
                    break;
                }
            }
        },
        setCurrent: function (page) {
            current.page = page;
        },
        getCurrent: function () {
            return current;
        }
    };
});

app.controller('contentController', ['$scope', 'pageService', function ($scope, pageService) {
    $scope.current = pageService.getCurrent();
    $scope.pages = pageService.getPages();
}]);

app.controller('navigationController', ['$scope',...