index.html

<!DOCTYPE html>
<html ng-app="taskManager">
    <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
        <title>RAI angular tasks</title>
    </head>
    <body ng-controller="TaskManagerController as tm">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="task in tm.task | orderBy:'time'">
               <h3>
                    {{task.name | uppercase}}
                    <em class="pull-right">Due date: {{task.time | date:'dd/MM/yyyy @ h:mma'}}</em>
                </h3>
                <section ng-controller="PanelController as panel">
                    <ul class="nav nav-pills">
                        <li ng-class="{active:panel.isSelected(1)}">
                             <a href ng-click="panel.selectTab(1)">Description</a>
                        </li>
                        <li ng-class="{active:panel.isSelected(2)}">
                            <a href ng-click="panel.selectTab(2)">Add new task</a>
                        </li>
                        <li ng-class="{active:panel.isSelected(3)}">
                            <a href ng-click="panel.selectTab(3)">Edit</a>
                        </li>
                    </ul>
                    <div class="panel" ng-show="panel.isSelected(1)">
                        <h4>Description</h4>
                        <p>{{task.description}}</p>
                    </div>
                    <div class="panel" ng-show="panel.isSelected(2)">
                        <h4>Add new task</h4>
                        <p></p>
                    </div>
                    <div class="panel" ng-show="panel.isSelected(3)">
                        <h4>Edit task</h4>
                        <p></p>
                    </div>
                </section>

            </li>

        </ul>

        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>

    </body>
</html>