带有左右导航按钮的样式菜单栏

Question

我在下面的代码中使用ng-repeat来创建基于用户选择的角色的动态菜单。但是在5个角色之后，我需要有一个正确的导航按钮，实际上将启用接下来的5个角色，当启用接下来的5个角色时，它将左侧导航和右侧导航以显示前一个菜单和下一个菜单。我附上了我正在获得的图像而我期待的是什么。我错过了某个地方，需要帮助。

我的输出：

实际需要的一个：

HTML：

    <div class="Allmenus">
 <aside class="myextensionbar" ng-if="moreRoles=true">
       <ul class="mynewul">

           <li class="myli"><a href ng-click="showPreviousRole()"><span class="glyphicon glyphicon-chevron-left"></span></a></li>   

                    </ul>
                    </aside>
    <section class="mytopmenu">
    <ul class="myul nav nav-tabs" role="tablist">
    <li class="myli" ng-repeat="role in roles track by $index" 
      ng-class="{active:isSelected($index)}">
    <a href ng-click="displaySelectedRole(role, $index)">{{role}}</a></li>
</ul>
</section>
    <aside class="myextensionbar" ng-if="moreRoles=true">
   <ul class="mynewul">

       <li class="myli"><a href ng-click="showMoreRole()"><span class="glyphicon glyphicon-chevron-right"></span></a></li>   

                </ul>
                </aside>

</div>

JS：

$scope.showMoreRole =function(){

    for(var i=0; i<5;i++){ 
        console.log($scope.displayrole[i]);
        $scope.showExtensionBar = false;
        if($scope.displayrole[i]=="Actor"){
            $scope.getActor();
        }

        else if($scope.displayrole[i]=="Director"){

              $scope.getDirector();
        }
        else if($scope.displayrole[i]=="MusicDirector"){

            $scope.getMusicDirector();
                }

         else if($scope.displayrole[i]=="Singer"){

            $scope.getSinger();
         }

        else if($scope.displayrole[i]=="Lyricist"){
            $scope.getLyricist();
                }
        else if($scope.displayrole[i]=="Dialogue"){
            $scope.getDialogue();
                }
        else if($scope.displayrole[i]=="Model"){
            $scope.getModel();
       }
         else if($scope.displayrole[i]=="GraphicDesigner"){
            $scope.getGraphicDesigner();
                }
         else if($scope.displayrole[i]=="Screenplay"){
            $scope.getScreenplay();
                }
         else if($scope.displayrole[i]=="Dialogue"){
            $scope.getDialogue();
                }
         else if($scope.displayrole[i]=="BackgroundMusic"){
            $scope.getBackgroundMusic();
                }
    }
    };

显示所选角色：

   $scope.displaySelectedRole = function(role, index) {

       $scope.indexValue = index;
       $scope.roleName = role;

       if(role == "Actor") {
           $scope.getActorInfo();
       } else if (role == "Director") {
           $scope.getDirectorInfo();
       } else if (role == "Singer") {
           $scope.getSingerInfo();
       } else if (role == "Lyricist") {
           $scope.getLyricistInfo();
       } else if (role == "MusicDirector") {
           $scope.getMusicDirectorInfo();
       } else if (role == "StandupComedian") {
           $scope.getStandupComedianInfo();
       } else if (role == "Model") {
           $scope.getModelInfo();
       } else if (role == "Cinematographer") {
           $scope.getCinematographerInfo();
       } else if (role == "Photographer") {
           $scope.getPhotographerInfo();
       } else if (role == "ScriptWriter") {
           $scope.getScriptWriterInfo();
       } else if (role == "Choreographer") {
           $scope.getChoreographerInfo();
       } else if (role == "Editor") {
           $scope.getEditorInfo();
       } else if (role == "CostumeDesigner") {
           $scope.getCostumeDesignerInfo();
       }