We Keep Coding

How to create an object gathering data from a table?

Lets say we have a table like the one in the example below and i want to do those things in order :
Create a parent object
Assign the text of the header as the first key/value
Create an array as the second key/value
Create an object for every td in tbody with 4 key/values inside containing their values like this :
{
age: "33",
car: "Toyota",
job: "Plummer",
name: "Mark"
}
Push all the objects I created in the previous step in the array.
So the final parent object will become this (based on the example) :
{
head: "Whatever",
cells: [{
name: "Mark",
job: "Plummer",
age: "33",
car: "Toyota"
}, {
name: "John",
job: "Electrician",
age: "26",
car: "Fiat"
}, {
name: "Jane",
job: "Police Officer",
age: "45",
car: "Tesla"
}, {
name: "Chris",
job: "Engineer",
age: "31",
car: "Mercedes"
}]
}
I got as far as creating the parent object and the 2 keys inside, but I don't even know where to start for creating an object for every tr. Any ideas on what the steps I have to follow next?
My progress so far :
var parentObject = {};
parentObject.head = $("#mp").text()
parentObject.cells = []
console.log(parentObject)
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="4" id="mp">Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Plummer</td>
<td>33</td>
<td>Toyota</td>
</tr>
<tr>
<td>John</td>
<td>Electrician</td>
<td>26</td>
<td>Fiat</td>
</tr>
<tr>
<td>Jane</td>
<td>Police Officer</td>
<td>45</td>
<td>Tesla</td>
</tr>
<tr>
<td>Chris</td>
<td>Engineer</td>
<td>31</td>
<td>Mercedes</td>
</tr>
</tbody>
</table>

To do what you require you can use map() to build an array of objects from the cells within the tbody, something like this:
const $table = $('table');
let serialisedTable = {
name: $table.find('thead th').text(),
cells: $table.find('tbody tr').map((i, row) => ({
name: row.cells[0].innerText.trim(),
job: row.cells[1].innerText.trim(),
age: row.cells[2].innerText.trim(),
car: row.cells[3].innerText.trim()
})).get()
}
console.log(serialisedTable);
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="4" id="mp">Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Plummer</td>
<td>33</td>
<td>Toyota</td>
</tr>
<tr>
<td>John</td>
<td>Electrician</td>
<td>26</td>
<td>Fiat</td>
</tr>
<tr>
<td>Jane</td>
<td>Police Officer</td>
<td>45</td>
<td>Tesla</td>
</tr>
<tr>
<td>Chris</td>
<td>Engineer</td>
<td>31</td>
<td>Mercedes</td>
</tr>
</tbody>
</table>
Note that this can be made more dynamic by placing the 'cell' object's keys in the HTML of each row, if necessary.

AngularJS get id of element clicked and use in controller

I just began learning AngularJS, and I am trying to create a pretty simple web application. Right now, I have some users. Each user is displayed in an individual table and each user has its own details which is displayed in a table under it.
$scope.userList = [{username: "Bob_t", detailsId: 1}, {username: "Mike_V", detailsId: 2}];
$scope.userDetails = [{Name: "Bob", Age: 20, id: "1"}, {Name: "Michael", Age: 18, id: "2"}];
You can see that each user has a reference to it's corresponding details (detailsId in userList corresponds to id in userDetails).
Basically, what I'm trying to do is initially have the details table hidden for each user. And when someone clicks the expand button for a specific user, open that user's corresponding details table and populate it with that user's details. What I'm having trouble with is getting the detailsId from the clicked expand button and then using that to query my DB to get the correct user's details to display in the table under it.
<div ng-repeat="user in userList | filter:searchBox">
<div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
</table>
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="isOpened=!isOpened; showOrHideDetails(isOpened, param)" ng-class="{'uk-icon-plus-square-o': !isOpened, 'uk-icon-minus-square-o': isOpened}"></a>
</div>
<div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="details in userDetails" id={{user.id}}>
<td>{{details.Name}}</td>
<td>{{details.Age}}</td>
<td>
</td>
</tr>
</table>
</div>
</div>
my controller:
$http({
method : "GET",
url : "http://database:8081/userAccounts/"
}).then(function mySucces(response) {
$scope.userList = response.data;
}, function myError(response) {
// $scope.userList = response.statusText;
});
$scope.showOrHideDetails = function(isOpened, param)
if(isOpened){
console.log($scope.id)
$scope[id] = true;
console.log($scope.id);
$http({
method : "GET",
url : "http://database:8081/details?id=" + index
}).then(function mySucces(response) {
$scope.userDetails = response.data;
}, function myError(response) {
$scope.userDetails = response.statusText;
});
}
else{
$scope.showDetails = false;
}
}
What is really confusing to me is once I get the correct userDetails object after querying the DB, how do I populate the corresponding table with that info?
I know I probably need a model, but this confuses me because the number of users is unknown.

First, your code is a bit confuse..
After each query you're attributing the response (which one is the details of a single user) to the whole array userDetails:
$scope.userDetails = response.data;
While it should be:
$scope.userDetails.push(response.data);
In addition, you have a single variable called isOpened, for sure it won't work, because you have multiple buttons for only 1 variable.
So my suggestion is to change it to:
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>
Also you have to check if the userDetail is already in your userDetails array.
Finally, since you want to show the details based on the user, you can use the native filter, because you already have the id property of users in both arrays, as below:
<tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>
A simple demo:
(function() {
angular
.module('app', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$scope.userList = [{
username: "Bob_t",
detailsId: 1
}, {
username: "Mike_V",
detailsId: 2
}];
$scope.userDetails = [{
Name: "Bob",
Age: 20,
id: "1"
}, {
Name: "Michael",
Age: 18,
id: "2"
}];
$scope.showOrHideDetails = function(user) {
user.isOpened = !user.isOpened;
function mySuccess(response) {
$scope.userDetails.push(response.data);
}
function myError(response) {
console.log(response.statusText);
}
if (user.isOpened) {
$http.get('http://database:8081/details?id=' + user.id)
.then(mySuccess)
.catch(myError);
} else {
$scope.showDetails = false;
}
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="user in userList | filter:searchBox">
<div class="uk-panel-box-secondary uk-overflow-container tableDiv uk-margin-large-bottom">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-bind="user.username"></td>
</tr>
</tbody>
</table>
<a class="uk-margin-bottom uk-margin-left" id="expandIcon" ng-click="showOrHideDetails(user)" ng-class="{'uk-icon-plus-square-o': !user.isOpened, 'uk-icon-minus-square-o': user.isOpened}"></a>
</div>
<div class="uk-panel-box-secondary uk-overflow-container uk-margin-top uk-margin-large-left uk-margin-bottom tableDiv">
<table class="uk-table uk-table-hover uk-margin-top">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tr ng-if="user.isOpened" ng-repeat="details in userDetails | filter: { id: user.detailsId }" id={{user.id}}>
<td ng-bind="details.Name"></td>
<td ng-bind="details.Age"></td>
<td>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I hope it helps!!

have you tried passing user from
<div ng-repeat="user in userList | filter:searchBox">
to function showOrHideDetails(user)

Nested ng-repeat in Angular JS table

I am a newbie to Angular JS.
I have been trying iterate through a model collection and display the same in a table.
The Model looks like :
var myModule = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var countries = [
{
name: "UK",
cities: [
{name: "London"},
{name: "Birmingham" },
{name: "Manchestar" }
],
flag:"/Images/UK.gif"
},
{
name: "USA",
cities: [
{name: "Los Angeles"},
{name: "Houston"},
{name: "Florida"},
],
flag:"/Images/USA.png"
}
];
$scope.countries = countries;
});
And I want the table structure to be
Country City1 City2 City3 Flag
UK London Birmingham Manchestar .....
USA ...... ......... ......... .....
But I could not do the same in the html page.
So far the code looks like :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/MyModuleScript.js"></script>
</head>
<body ng-controller="myController">
<div>
<table>
<thead>
<tr>
<th>Country</th>
<th>City 1</th>
<th>City 2</th>
<th>City 3</th>
<th>Flag</th>
</tr>
</thead>
<tbody ng-repeat="country in countries">
<tr ng-repeat="city in country.cities">
<td>{{ country.name }}</td>
<td>
{{......}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What I need to do to achieve the same ? Please explain.

try this. you must put ng-repeat on td instead of row.
var myModule = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.countries = [
{
name: "UK",
cities: [
{name: "London"},
{name: "Birmingham" },
{name: "Manchestar" }
],
flag:"/Images/UK.gif"
},
{
name: "USA",
cities: [
{name: "Los Angeles"},
{name: "Houston"},
{name: "Florida"},
],
flag:"/Images/USA.png"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myModule" ng-controller="myController">
<div>
<table>
<thead>
<tr>
<th>Country</th>
<th>City 1</th>
<th>City 2</th>
<th>City 3</th>
<th>Flag</th>
</tr>
</thead>
<tbody ng-repeat="country in countries">
<tr>
<td>{{ country.name }}</td>
<td ng-repeat="city in country.cities">
{{city.name}}
</td>
<td><img ng-src="{{country.flag}}"></td>
</tr>
</tbody>
</table>
</div>
</div>

repeat a little and it works as you need it.
<tbody ng-repeat="country in countries">
<tr >
<td >{{ country.name }}</td>
<td ng-repeat="city in country.cities">
{{city.name}}
</td>
<td><img ng-src="{{country.flag}}"></td>
</tr>
</tbody>
var myModule = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var countries = [
{
name: "UK",
cities: [
{name: "London"},
{name: "Birmingham" },
{name: "Manchestar" }
],
flag:"/Images/UK.gif"
},
{
name: "USA",
cities: [
{name: "Los Angeles"},
{name: "Houston"},
{name: "Florida"},
],
flag:"/Images/USA.png"
}
];
$scope.countries = countries;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
</head>
<body ng-controller="myController">
<div>
<table>
<thead>
<tr>
<th>Country</th>
<th>City 1</th>
<th>City 2</th>
<th>City 3</th>
<th>Flag</th>
</tr>
</thead>
<tbody ng-repeat="country in countries">
<tr >
<td >{{ country.name }}</td>
<td ng-repeat="city in country.cities">
{{city.name}}
</td>
<td><img ng-src="{{country.flag}}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
var myModule = angular
.module("myModule", [])
.controller("myController", function ($scope) {
var countries = [
{
name: "UK",
cities: [
{name: "London"},
{name: "Birmingham" },
{name: "Manchestar" }
],
flag:"/Images/UK.gif"
},
{
name: "USA",
cities: [
{name: "Los Angeles"},
{name: "Houston"},
{name: "Florida"},
],
flag:"/Images/USA.png"
}
];
$scope.countries = countries;
});

Everything is fine except your HTML.
Your first ng-repeat for countries should be for <tr>
The second one should be for <td>
tbody is not supposed to be repeated as seen by some of the answers here. As per w3c HTML5 Specs tbody tbody is single element after thead
You are on the right track just remember that ng-repeat will repeat the element on which it is specified as attribute.
<tbody>
<tr ng-repeat="country in countries">
<td >{{ country.name }}</td>
<td ng-repeat="city in country.cities">
{{city.name}}
</td>
<td><img ng-src="{{country.flag}}"></td>
</tr>
</tbody>

Populate an input when checkbox is checked from ngRepeat

I'm trying to populate an input two ways. The first method is to simply type an amount into the input, which works perfectly. The second method (which I'm struggling with) is to check the checkbox generated within the ngRepeat directive.
The desired behavior is that the checkbox will take the value of item.amount from the JSON data and populate the input with that value. Here is the markup:
<table class="table table-striped header-fixed" id="invoiceTable">
<thead>
<tr>
<th class="first-cell">Select</th>
<th class="inv-res2">Invoice #</th>
<th class="inv-res3">Bill Date</th>
<th class="inv-res4">Amount</th>
<th class="inv-res5">Amount to Pay</th>
<th class="inv-res6"></th>
</tr>
</thead>
<tbody>
<tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'Unpaid'}">
<td class="first-cell"><input type="checkbox" /></td>
<td class="inv-res2">{{item.invoiceNum}}</td>
<td class="inv-res3">{{item.creationDate}}</td>
<td class="inv-res4" ng-init="invoices.total.amount = invoices.total.amount + item.amount">{{item.amount | currency}}</td>
<td class="inv-res5">$
<input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" ng-change="getTotal()" step="0.01" /></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr class="totals-row" >
<td colspan="3" class="totals-cell"><h4>Account Balance: <span class="status-error">{{invoices.total.amount | currency }}</span></h4></td>
<td class="inv-res4"><h5>Total to pay:</h5></td>
<td class="inv-res5">{{total | currency}}</td>
<td class="inv-res6"></td>
</tr>
</tbody>
</table>
And here is the JavaScript:
myApp.controller('invoiceList', ['$scope', '$http', function($scope, $http) {
$http.get('assets/js/lib/angular/invoices.json').success(function(data) {
$scope.invoices = data;
});
$scope.sum = function(list) {
var total=0;
angular.forEach(list , function(item){
total+= parseInt(item.amount);
});
return total;
};
$scope.total = 0;
$scope.getTotal = function() {
$scope.total = 0;
$scope.invoices.forEach(function(item){
$scope.total += parseFloat(item.payment);
});
};
$scope.pushPayment = function(item){
if($scope.checked == 'checked'){
return item.payment;
}
};
}]);

If I understand correctly you want a toggle-able check box, If it is checked then you want to copy that invoices amount into the input box below. You could do something similar to below with a combination of ng-model and ng-change
<tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'Unpaid'}">
<td class="first-cell">
<input type="checkbox" ng-model="item.checked" ng-change="select(item)"/>
</td>
<td class="inv-res5">$
<input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" step="0.01"/>
</td>
</tr>
and add the following to your controller
$scope.select = function(item) {
if(item.checked){
item.payment = item.amount;
}
}
What this should do:
You bind the status of the check box to $scope.checked using ng-model
Every time the checkbox status changes ng-change is called, therefore selectInvoice is called.
Select invoice checks whether the checkbox is checked and adjusts the item.payment value accordingly which is bound to the inputs ng-model
See this Plunker for a working example (Note I thinned out the code so its only the bit we're interested in
As an aside, you don't need to have the input box call getTotal when its value changes. Just change the last few lines to:
<td class="inv-res4"><h5>Total to pay:</h5></td>
<td class="inv-res5">{{getTotal() | currency}}</td>
And modify your JavaScript to:
$scope.getTotal = function() {
var total = 0;
$scope.invoices.forEach(function(item){
total += parseFloat(item.payment);
});
return total;
};
It will still be up to date every time Angular 'digests'

The Plunker
The html:
<table class="table table-striped header-fixed" id="invoiceTable">
<thead>
<tr>
<th class="first-cell">Select</th>
<th class="inv-res2">Invoice #</th>
<th class="inv-res3">Bill Date</th>
<th class="inv-res4">Amount</th>
<th class="inv-res5">Amount to Pay</th>
<th class="inv-res6"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in mainCtrl.invoiceList.invoices">
<td class="first-cell"><input type="checkbox" ng-model="item.selected" /></td>
<td class="inv-res2">{{item.invoiceNum}}</td>
<td class="inv-res3">{{item.creationDate}}</td>
<td class="inv-res4" ng-init="invoices.total.amount = invoices.total.amount + item.amount">{{item.amount | currency}}</td>
<td class="inv-res5">$
<input type="text" ng-model="mainCtrl.getAmount(item)"/></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr class="totals-row" >
<td colspan="3" class="totals-cell"><h4>Account Balance: <span class="status-error">{{invoices.total.amount | currency }}</span></h4></td>
<td class="inv-res4"><h5>Total to pay:</h5></td>
<td class="inv-res5">{{mainCtrl.getTotalAmount()}}</td>
<td class="inv-res6"></td>
</tr>
</tbody>
</table>
The JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['tempDataStorageService', function(tempDataStorageService) {
var myCtrl = this;
myCtrl.invoiceList = tempDataStorageService;
myCtrl.getAmount = function(item){
return item.selected? item.amount : "";
};
myCtrl.getTotalAmount = function(){
var total = 0;
for(var i = 0; i < tempDataStorageService.invoices.length; i++){
if(tempDataStorageService.invoices[i].selected){
total = total + tempDataStorageService.invoices[i].amount;
}
}
return total;
}
}]);
app.factory('tempDataStorageService', function() {
// The service object
var storage = this;
storage.invoices = [{invoiceNum: 1, creationDate: "1/1/16", amount: 1.50, selected: false},
{invoiceNum: 2, creationDate: "1/2/16", amount: 2.50, selected: false},
{invoiceNum: 2, creationDate: "1/2/16", amount: 2.50, selected: false},
{invoiceNum: 3, creationDate: "1/3/16", amount: 3.50, selected: false},
{invoiceNum: 4, creationDate: "1/4/16", amount: 4.50, selected: false},
{invoiceNum: 5, creationDate: "1/5/16", amount: 5.50, selected: false},
{invoiceNum: 6, creationDate: "1/6/16", amount: 6.50, selected: false},
{invoiceNum: 7, creationDate: "1/7/16", amount: 7.50, selected: false},
{invoiceNum: 8, creationDate: "1/8/16", amount: 8.50, selected: false}];
// return the service object
return storage;
});
That's a way of doing it

Add an attribute amountToPay to your invoices and send the item to the getTotal function:
<input ng-validate="number" type="number" class="input-mini" value="{{pushPayment()}}"
ng-model="item.amountToPay" ng-change="getTotal(item)" step="0.01" /></td>
In your checkbox change the ng-model to item.checked:
<input type="checkbox" ng-checked="item.checked" /></td>
Add this to your getTotal() function:
$scope.getTotal = function(item) {
item.checked = true;
$scope.total = 0;
$scope.invoices.forEach(function(item){
$scope.total += parseFloat(item.payment);
});
};
If you need to populate your input, just modify the amountToPay attribute

Thanks for the assistance, but I think I was overthinking it. I got to work with simply adding:
ng-click="item.payment=item.amount" ng-change="getTotal()"
to the checkbox. I still have to incorporate this into the sum function, but I solved the issue.

AngularJS ng-repeat-start with limitTo doesn't work

I have a list of several objects and at the beginning I want to load just some of them. I took a look at the statement ng-repeat, but I need to have a structure like this:
<table class="table table-hover table-hidden">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse" ng-init="isCollapsed=true">
...
</tr>
<tr ng-repeat-end class="more">
...
</tr>
</tbody>
</table>
I tried to apply the statement limitTo inside ng-repeat-start, in this way:
<tr ng-repeat-start="object in objects | filter:query | orderBy:predicate:reverse| limitTo: limit" ng-init="isCollapsed=true">
and on controller I wrote:
$scope.limit = 10;
$scope.incrementLimit = function () {
$scope.limit += 10;
};
The function incrementLimit is called by a click on hyperlink
<a href ng-click="incrementLimit()">more</a>
The list of objects is instantiated and filled (with all the elements) when the page loads.
With my approach at the beginnig are loaded and showed first 10 elements correctly, and when I click on "more" the variable $scope.limitis incremented, but on the page nothing happens. Anyone can explain me why?

limitTo is working fine inside ng-repeat-start
Take a look at this
var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
$scope.limit = 1;
$scope.incrementLimit = function () {
$scope.limit += 1;
};
$scope.data = [{
title: 'Foo',
text: 'Lorem'
}, {
title: 'Bar',
text: 'Iste'
}, {
title: 'Jon',
text: 'Fat'
}, {
title: 'Los',
text: 'Ice'
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app='myApp' ng-controller="Controller">
<table border="2" class="table table-hover table-hidden">
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr ng-repeat-start="object in data | filter:query | orderBy:predicate:reverse| limitTo: limit" ng-init="isCollapsed=true" ng-bind="object.title">...</tr>
<tr ng-repeat-end class="more">...</tr>
</tbody>
</table>
more
</div>

Please check the below code and fiddle it is working fine
<body ng-controller="myController">
<button ng-click="incrementLimit()" >increment</button> <br/>
<table class="table table-hover table-hidden">
<thead>
<tr clospan="3">
Head
</tr>
</thead>
<tbody>
<tr ng-repeat-start="friend in objects|limitTo: limit" ng-init="isCollapsed=true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
<tr ng-repeat-end class="more">
<td colspan="3">Footer</td>
</tr>
</tbody>
</table>
</table>
</body>
js code
app = angular.module("app", []);
app.controller("myController", function($scope) {
$scope.objects =
[{
name: 'John',
phone: '555-1212',
age: 10
}, {
name: 'Mary',
phone: '555-9876',
age: 19
}, {
name: 'Mike',
phone: '555-4321',
age: 21
}, {
name: 'Adam',
phone: '555-5678',
age: 35
}, {
name: 'Julie',
phone: '555-8765',
age: 29
}];
$scope.limit = 2;
$scope.incrementLimit = function () {
$scope.limit += 1;
};
});
Fiddle http://jsbin.com/hoguxexuli/1/edit

I solved my problem. Basically I put the hyperlink in a different div, so the controller and the $scope were also different. It was a stupid carelessness.