Why is my ng-repeat not showing pulled data? - angularjs

Question

I am following an Angular tutorial where I am trying to format my code in John Papa's style guide for Angular 1.
I am currently trying to display a table of github repos from any username that is inputted into the search form. Everything else displays except for the repos.
Please find a link to the code on plunker.co -> here.
This is the html template code below:
<div ng-controller="UserController as github">
<h4>{{ github.user.name }}</h4>
{{ github.error }}
<img ng-src="{{ github.user.avatar_url }}" title="{{ github.user.name }}" />
</div>
<div class="input-field col s12">
<select ng-model="github.repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
<label>Order By:</label>
</div>
<table class="col">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="'repo in github.repos | orderBy: github.repoSortOrder'">
<td>{{ repo.name }}</td>
<td>{{ repo.stargazers_count | number }}</td>
<td>{{ repo.language }}</td>
</tr>
</tbody>
</table>
<br>
Back to search
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
And this is the UserController js code:
// Code goes here
(function() {
angular
.module('app.github')
.controller('UserController', ['github', '$routeParams', '$log', function UserController(github, $routeParams, $log) {
var vm = this;
var onUserComplete = function(data) {
vm.user = data;
github.getRepos(vm.user)
.then(onRepos, onError);
};
var onRepos = function(data) {
$log.info('getting data');
vm.repos = data;
$log.info('finished getting data');
};
var onError = function(reason) {
vm.error = "Boo! Could not fetch the user data!";
};
vm.username = $routeParams.username;
vm.repoSortOrder = "-stargazers_count";
github.getUser(vm.username).then(onUserComplete, onError);
}]);
}());
Lastly, this is the 'github' service as a dependancy to the controller:
(function() {
angular
.module('app.github')
.factory('github', ['$http', '$log', function github($http, $log) {
var getUser = function(username) {
return $http.get("https://api.github.com/users/" + username)
.then(function(response) {
return response.data;
});
};
var getRepos = function(user) {
$log.info('starting getRepos()');
return $http.get(user.repos_url)
.then(function(response) {
$log.info('ending getRepos()');
return response.data;
});
};
return {
getUser: getUser,
getRepos: getRepos
};
}]);
})();
May I have someones input in this please?
Thanks
AlvSovereign

Answer 1

This is wrapped in single quotes which angular will evaluate as a string:
<tr ng-repeat="'repo in github.repos | orderBy: github.repoSortOrder'">
It needs to be:
<tr ng-repeat="repo in github.repos | orderBy: github.repoSortOrder">

Answer 2

The error is on the first line. You bound the controller to only that div.
<div ng-controller="UserController as github">//here
<h4>{{ github.user.name }}</h4>
{{ github.error }}
<img ng-src="{{ github.user.avatar_url }}" title="{{ github.user.name }}" />
</div>
Putting a div around the whole thing should fix this. Along with the ng-repeat mistake mentioned below by #robj.