angularjs - Dynamically inserting elements in Angular JS -

i have 3 tabs(article(s), visitor(s), subscription(s)) , common place of pagination; each tab data provided pagination. on click of respective tab; respective ng-view coming picture , controllers responding properly. custom made pagination; want update number if <li> accordingly on basis of server response(number of pages available next pagination).

<div ng-app="mylibrary">     <ul>         <li><a href="#/articlemanager">article(s)</a></li>         <li><a href="#/visitormanager">visitor(s)</a></li>         <li><a href="#/subscriptionsmanager">subscription(s)</a></li>         <li>             <ul> //will behave pagination toolbar , each <li> represents page; after minimum of 5 pages; add combo(as in plan) cater more page(s)                 <li ng-repeat="tpageobj in recordpagenumbers">                     <span ng-click="fetchpage(tpageobj.pageindex)">{{ tpageobj.pageindex }}</span>                 </li>             </ul>         </li>     </ul> </div> <div ng-view></div> 

when view rendered(after getting data server; have array $scope ($scope.recordpagenumbers) , calculating page(s) accordingly. in console; shows appropriate number of page(s); unable figure-out why ng-repeat not behaving(as learned so-far; being 2 way binding modification in model trigar view update) should.

var mylibrary = angular.module('mylibrary', ['ngroute', 'ngtable']);      mylibrary.config(['$routeprovider', function($routeprovider) {           $routeprovider.when('/',              { templateurl : 'angular-view/article.html', controller : 'articlelist' } );         $routeprovider.when('/articlemanager',              { templateurl : 'angular-view/article.html', controller : 'articlelist' } );         $routeprovider.when('/visitormanager',              { templateurl : 'angular-view/visitor.html', controller : 'visitorlist' } );         $routeprovider.when('/subscriptionsmanager',              { templateurl : 'angular-view/subscriptions.html', controller : 'subscriptions' } );       }]);      mylibrary.controller('articlelist', function($scope, $http){         $scope.articlelistarray = [];         $scope.recordpagenumbers = [];         $http.get('ngmylibrary.do?action=allarticle')             .success(function(response) {                 $scope.articlelistarray = response.data; //sending data `ng-view`                 var totalpagecount = response.totalpagecount;//calculating pages , according creating `recordpagenumbers` array.                 if(totalpagecount){                     for(var counter = 1; counter <= totalpagecount; counter++)                         $scope.recordpagenumbers.push({pageindex : counter, disablebutton : false});                 } else {                     $scope.recordpagenumbers.push({pageindex : 1, disablebutton : true});                 }                 console.log($scope.recordpagenumbers); //console show expected             }         );     }); 

console:

[object { pageindex=1}, object { pageindex=2}, object { pageindex=3}, object { pageindex=4}, object { pageindex=5}, object { pageindex=6}] 

i tried {{ $index }} loop index of ng-repeat din't work well. please help. newbie ng; hence not figure out way check within ng-repat tag through debug.

without seeing full project structure bit difficult know. have checked see if controllers scope covers html trying use?

for example update first line be

<div ng-app="mylibrary" ng-controller="articlelist"> 

it way have set routing, controller being responsible html being injected ng-view part of page.