Iterate on ng-repeat - angularjs

Question

Im trying to figure out how the variables are called in angular. Im new to angularjs and cant seem to figure out why in the first example we are iterating in the ng-repeat 'group in $groups' and in the second example we are iterating over 'user in $data', i cant seem to figure out where $groups and $data come from and why i cant change the name on both examples and keep it working, so i can now how to call them in my own example.
First example: http://plnkr.co/edit/CBcbkc?p=preview
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
var data = [{name: "Moroni", age: 50, role: 'Administrator'},
{name: "Tiancum", age: 43, role: 'Administrator'},
{name: "Jacob", age: 27, role: 'Administrator'},
{name: "Nephi", age: 29, role: 'User'},
{name: "Enos", age: 34, role: 'User'}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
groupBy: 'role',
total: data.length,
getData: function($defer, params) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, $scope.tableParams.orderBy()) :
data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
})
<table ng-table="tableParams" class="table">
<tbody ng-repeat="group in $groups">
<tr class="ng-table-group">
<td colspan="{{$columns.length}}">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{ group.value }}</strong>
</a>
</td>
</tr>
<tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
<td sortable="name" data-title="'Name'">
{{user.name}}
</td>
<td sortable="age" data-title="'Age'">
{{user.age}}
</td>
</tr>
</tbody>
</table>
Second example: http://plnkr.co/edit/HUe0e1zBGOG9oOyqpGq9?p=preview
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
$scope.myValues = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.tableParams = new ngTableParams({
sorting: {
name: 'asc'
}
}, {
getData: function($defer, params) {
$defer.resolve($filter('orderBy')($scope.myValues, params.orderBy()));
}
});
});
<button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
<p><strong>Sorting:</strong> {{tableParams.sorting()|json}}
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>

Answer 1

If you are trying to figure out how variables and angular works in general, THIS is a great tutorial.
If you're trying to figure out why you can't change the names in your examples, the answer is that you are using a custom directive called ng-table created by this guy to make life a little easier when dealing with tables in angular. Like if you wanted to "group" for example. So $data and $groups, are part of that.
In your example, you created a variable with a collection of objects in it called "myValues". That variable lives on the scope. You can access that data in the html, and use the ng-repeat from angular like so:
<table class="table">
<tr ng-repeat="user in myValues">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
Notice how you would no longer be using the directive "ng-table." user is defined in the html with your ng-repeat, you could just as easily call it "righteousDude in myValues" or "guy in myValues".
<table class="table">
<tr ng-repeat="righteousDude in myValues">
<td data-title="'Name'" sortable="'name'">
{{righteousDude.name}}
</td>
If you wanted the data name changed, you could change it where you define it in the .js file.
$scope.righteousDudes = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},.....ect
Just remember that ng-repeat is an angular directive that "instantiates a template once per item from a collection"
And your variable that you create in the ng-repeat...i.e. "user" represents that item. Hope that helps!