Dynamically inserting elements in Angular JS - angularjs

Question

I have three tabs(Article(s), Visitor(s), Subscription(s)) and a common place of pagination; where each tab data will be provided with pagination. On click of the respective tab; respective ng-view are coming to picture and controllers are responding properly. For this custom made pagination; i want to update the number if <li> accordingly on the basis of the server response(number of pages available for next pagination).
<div ng-app="myLibrary">
<ul>
<li>Article(s)</li>
<li>Visitor(s)</li>
<li>Subscription(s)</li>
<li>
<ul> //will behave as pagination toolbar and each <li> represents a page; after a minimum of 5 pages; i will add a combo(as in plan) to 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 the view is rendered(after getting the data from server; i have a array with the $scope ($scope.recordPageNumbers) and calculating the page(s) accordingly. Even in the console; it shows appropriate number of page(s); but i am unable to figure-out why the ng-repeat is not behaving(as i learned so-far; being two way binding modification in the model will trigar the view update) as it 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 to `ng-view`
var totalPageCount = response.totalPageCount;//calculating pages and according creating the `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 as expected
}
);
});
Console:
[Object { pageIndex=1}, Object { pageIndex=2}, Object { pageIndex=3}, Object { pageIndex=4}, Object { pageIndex=5}, Object { pageIndex=6}]
I tried with {{ $index }} as the loop index of the ng-repeat but it din't work as well. Please help. I am newbie to ng; hence could not figure out the way to check within the ng-repat tag through debug.

Answer 1

Without seeing the full project structure it is a bit difficult to know. But have you checked to see if the controllers scope covers the HTML you are trying to use?
For example update the first line to be
<div ng-app="myLibrary" ng-controller="articleList">
It could be that the way you have it set up with the routing, the controller is only being responsible for the HTML being injected into the ng-view part of the page.