How to get results with angular.js $http? - angularjs

Question

I'm getting some problem getting the results from my api server with angularjs.
This is my code:
home.html (view)
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
Orders!
</div>
<ul>
<li ng-repeat="order in orders">{{order}}</li>
</ul>
main.js (controller)
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$scope.orders = [];
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
When I click the button, I can see the results in the console, but not in the list.
If use this code in the controller, it works when it loads, and when I click the button:
app.controller('mainController', function($scope, $http) {
$scope.message = 'Everyone come and see how good I look!';
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
$scope.getOrders = function(){
$http.get('http://apidemo.dev/api/orders').success(function(response){
console.log("My data: " + response);
$scope.orders = response;
});
}
});
What is the problem ?
Thanks!

Answer 1

Seems like you were using ngRoute and you have href="#" in your anchor, which leads you redirection to blank page, Keep href="" will help you in css to show pointer: cursor; on hover of it
Button
Orders!

Answer 2

Thanks everybody for your help.
The problem was the link in the view...
Orders!
would be:
<a ng-click="getOrders()">Orders!</a>