How to add an AngularJS Routing system

Question

I want to be able to link to the sections of this slide from different pages and have the same functionality as the links in the footer. Anyone got any suggestions? I've tried some solutions.. examples below

The Fiddle

AngularJS has been suggested but no idea what API to use or hot to implement it

Solution1? Solution2?

HTML

  <div class="content-slide-menu" data-menu="1">
            <ul class="menu">
                <li id="link1"> <a href="#null" data-page="1">blah blah</a>

                </li>
                <li id="link2"> <a href="#null" data-page="2">twit twoo</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page1" class="content">
                 <h3>blah blah</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page2" class="content">
                 <h3>twit twoo</h3>

                <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div class="content-slide-menu" data-menu="2">
            <ul class="menu">
                <li id="link3"> <a href="#null" data-page="3">Sit Amet</a>

                </li>
                <li id="link4"> <a href="#null" data-page="4">lorem ipsum</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page3" class="content">
                 <h3>Sit Amet</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page4" class="content">
                 <h3>lorem ipsum</h3>

                <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="footer"> 
            <a href="javascript:showAndScroll(1, 2)" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
            <br>
            <a href="javascript:showAndScroll(2, 4)" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
        </div>

CSS

    .content-slide-menu {
        float:left;
        width:220px;
        padding:0 10px;
    }
    .content-slide-menu li {
        list-style-type:none;
    }
    .content-slide-menu a {
        text-decoration:none;
        color:#2b2b2b;
        font-size:135%;
    }
    .content-slide-menu a:hover {
        color:#3ca3c5;
    }
    .content-slide {
        float:left;
        width:440px;
        margin-top:65px;
    }
    .content-slide .content {
        display:none;
    }
    .content-slide .content h3 {
        font-size: 150%;
        font-weight: bold;
    }
    .content-slide .content p {
        margin:5px 0;
        font-size:110%;
    }
    .dots {
        font-size:350%;
        font-weight:bold;
    }
    .active {
        color:#3ca3c5!important;
    }


    #footer {margin-top:800px;}

Script

 function showPage(menu, page) {
            $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
            $slider.next().children('.content').hide();
            $("#page" + page).show();
            $slider.find('a.active').removeClass("active");
            $("#link" + page).children().addClass('active');
        }
        function showAndScroll(menu, page) {
            showPage(menu, page);
            $('html, body').animate({
                scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
            }, 1000);
        }
        $(document).ready(function () {
            $(".menu a").click(function () {
                var $this = $(this),
                    $slider = $this.closest('.content-slide-menu');
                showPage($slider.data("menu"), $this.data("page"));
            });
            $(".content-slide-menu").each(function(index, that) {
                showPage($(that).data('menu'), $(that).find("a").first().data('page'));
            });
        });