angularjs 게시판 및 페이징

<table class="basicTb noticeTb">
    <thead>
        <tr>
            <th>종류</th>
            <th width="150px">섹터</th>
            <th>제목</th>
            <th>등록자</th>
            <th>등록일</th>
        </tr>
    </thead>
    <tbody id="tb_content">
    <!-- 
        <tr>
            <td class="agC"><span class="bxRed">뉴스</span></td>
            <td><span class="bxA"><em>A</em>자동차</span></td>
            <td>현지 주 정부 재협상 요구... 기아차 멕시코 공장 급제동</td>
            <td class="agC">Peter</td>
            <td class="agC">2016-05-09</td>
        </tr>
        <tr>
            <td class="agC"><span class="bxDblue">공시</span></td>
            <td><span class="bxG"><em>A</em>자동차</span></td>
            <td>현지 주 정부 재협상 요구... 기아차 멕시코 공장 급제동</td>
            <td class="agC">Peter</td>
            <td class="agC">2016-05-09</td>
        </tr>
        <tr>
            <td class="agC"><span class="bxRbrown">리서치</span></td>
            <td><span class="bxA"><em>A</em>자동차</span></td>
            <td>현지 주 정부 재협상 요구... 기아차 멕시코 공장 급제동</td>
            <td class="agC">Peter</td>
            <td class="agC">2016-05-09</td>
        </tr>
        <tr>
            <td class="agC"><span class="bxRed">뉴스</span></td>
            <td><span class="bxA"><em>A</em>자동차</span></td>
            <td>현지 주 정부 재협상 요구... 기아차 멕시코 공장 급제동</td>
            <td class="agC">Peter</td>
            <td class="agC">2016-05-09</td>
        </tr>
        <tr>
            <td class="agC"><span class="bxRed">뉴스</span></td>
            <td><span class="bxA"><em>A</em>자동차</span></td>
            <td>현지 주 정부 재협상 요구... 기아차 멕시코 공장 급제동</td>
            <td class="agC">Peter</td>
            <td class="agC">2016-05-09</td>
        </tr>   
        -->                                                                  
    </tbody>
</table>

<div id="paging">
 <ul>
  <li>1</li>
 </ul>
</div>

(function(angular) {
    angular.module('dgs').controller('nt0101Controller', function($rootScope,$scope,$http,$compile){
     
      var containerHt=$('#container').height();
      var sHeadHt=$('.sHead').height();      
      var conTy2Ht=containerHt -sHeadHt;
      $('.contentsTy2').css('height',conTy2Ht+'px');
      $(window).resize(function(){
       var containerHt=$('#container').height();
          var sHeadHt=$('.sHead').height();      
          var conTy2Ht=containerHt -sHeadHt;
          $('.contentsTy2').css('height',conTy2Ht+'px');       
      });
            
      //분할그리드
      $('#horiSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: '550px'}] });
            $( "#datepicker" ).datepicker();     


            
            
            $scope.page = 1;
            $scope.page_per = "all"; //전체는 all , 10,20,30 갯수 적으면 됨
            
            function reqData(){
             // page 
             var url = "service/nt/nt0100.jsp?page="+$scope.page;
          url += "&page_per="+$scope.page_per;
          /*
          url += "&FS_TYP="+$scope.FS_TYP.value; // 
          url += "&OUT_TYP="+$scope.OUT_TYP.value; // OUT_TYP
          url += "&TERM_TYP="+$scope.TERM_TYP;
          url += "&YEAR_TYP="+$scope.YEAR_TYP;
          url += "&IFRS="+$scope.IFRS;
          url += "&CURRENCY="+$scope.CURRENCY;
          */
          console.log(url);
          
          $http.get(url).success(function(data, status, headers, config) {
        console.log(data);
        
        // tb_content
        var html = "";
        
        $(data.result).each(function(index){
         var row = data.result[index]; 
         var firstRow = row.NOTE_CONTENT.indexOf("\n")>-1?row.NOTE_CONTENT.split("\n")[0]:row.NOTE_CONTENT;
         html += "<tr>"
          +"    <td class=\"agC\"><span class=\"bxRed\">"+row.NOTE_CATEGORY+"</span></td>"
          +"    <td><span class=\"bxA\"><em>A</em>"+row.NOTE_SECTOR+"</span></td>"
          +"    <td style=\"word-wrap: break-word; word-break:break-all\">"+firstRow+"</td>"
          +"    <td class=\"agC\">"+row.NOTE_WRITER+"</td>"
          +"    <td class=\"agC\">"+row.NOTE_DATE+"</td>"
          +"</tr>"
        });
        $("#tb_content").html(html);
        
        // 페이징 처리
        var total_record = data.record_info[0].total_record;
        if($scope.page_per == "all"){
         $("#paging").html("");
        }else{
         var paging = getPageNavi($scope.page,$scope.page_per,total_record);
         
         //paging = $compile($(paging).contents())($scope);
         paging = $compile($(paging))($scope);
         console.log(paging);
         
         $("#paging").html(paging);
        }
        
          });
            }
            $scope.goPage=function(page){
             $scope.page = page;
             reqData();
            }
            reqData();
            
            function getPageNavi(page_cur,page_per,total_record){
             var block_page = 10;
             var page = {
                  first : 1,
                  last : null,
                  prev : null,
                  next : null,
                  start : null,
                  end : null,
                  block_prev : null,
                  block_next : null  
                 };
             
             page.last = Math.ceil(parseInt(total_record,10)/parseInt(page_per,10));
             page.prev = page_cur-1>=1? page_cur-1: null;
             page.next = page_cur+1<=page.last? page_cur+1:null;
             // page start
             page.start = (Math.ceil(page_cur / block_page)-1)*block_page+1;
             page.end = page.last <= (page.start+block_page-1)? page.last : page.start+block_page-1; 
             page.block_prev = page.start-1>=1? page.start-1 : null;
             page.block_next = (page.start+block_page)<=page.last? page.start+block_page : null;  
             
             console.log(page);
             
             var rstr = "";
             rstr += "<a href=\"\" ng-click=\"goPage(1)\">[처음]</a>&nbsp;";
             if(page.block_prev){
              rstr += "<a ng-click=\"goPage("+page.block_prev+")\">[이전 "+block_page+" 개]</a>&nbsp;";
             }else{
              rstr += "[이전 "+block_page+" 개]&nbsp;";
             }
             if(page.prev){
              rstr += "<a ng-click=\"goPage("+page.prev+")\">[이전 페이지]</a>&nbsp;";
             }else{
              rstr += "[이전 페이지]&nbsp;";
             }
             
             for(var index=page.start;index<=page.end;index++){
              if(index == $scope.page){
               rstr += "<a ng-click=\"goPage("+index+")\"><b>["+index+"]</b></a>&nbsp;";
              }else{
               rstr += "<a ng-click=\"goPage("+index+")\">["+index+"]</a>&nbsp;";
              }
              
             }
             
             if(page.next){
              rstr += "<a ng-click=\"goPage("+page.next+")\">[다음 페이지]</a>&nbsp;";
             }else{
              rstr += "[다음 페이지]&nbsp;";
             }
             
             if(page.block_next){
              rstr += "<a ng-click=\"goPage("+page.block_next+")\">[다음 "+block_page+" 개]</a>&nbsp;";
             }else{
              rstr += "[다음 "+block_page+" 개]&nbsp;";
             }
             rstr += "<a ng-click=\"goPage("+page.last+")\">[끝]</a>";
             
              
             
             return rstr;
            }

    });
})(angular);