Edit in JSFiddle

angular.module('app', [])

    .controller('MainCtrl', function ($scope) {

    $scope.content = [{
        name: "red",
        content: "This is the purple content"
    }, {
        name: "blue",
        content: "This is the blue content"
    }, {
        name: "green",
        content: "This is the green content"
    }];
    $scope.currentContent = $scope.content[0];
    $scope.setPage = function (page) {
        $scope.currentContent = page;
    };
});

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div class="row">
             <h3>This is the header</h3>

        </div>
        <div class="row">
            <div class="small-4 columns">
                <ul>
                    <li ng-repeat="page in content"> <a ng-click="setPage(page)">{{page.name}} Content</a>

                    </li>
                </ul>
            </div>
            <div class="small-8 columns content">
                <div ng-switch on="currentContent.name">
                    <div ng-switch-when="red" class="red">{{currentContent.content}}</div>
                    <div ng-switch-when="blue" class="blue">{{currentContent.content}}</div>
                    <div ng-switch-when="green" class="green">{{currentContent.content}}</div>
                    <div ng-switch-default>No Content!</div>
                </div>
            </div>
        </div>
    </div>
</div>