Avoiding multiple angular GET request when ng-repeating scope

Question

I load my pages and menu from the angular scope witch is in turn requesting data to the Node server connected to the DB.

So my controller looks like this;

mid.controller('pageCtrl', function($scope, $http, $routeParams){
  $scope.id = ($routeParams && $routeParams["id"]) ? $routeParams["id"] : 0;
  $scope.pages = [];

  $http({
    method: 'GET',
    url: 'http://127.0.0.1/pages/'
  })
    .then(function(pages) {
      $scope.pages = pages.data;
   })
    .catch(function(errRes) {
      // Handle errRess
  });
});

The problem is that the request get executed all the way to my DB to for each menu element.

I have noticed that it get executed twice when using ng-repeat;

<div ng-repeat="page in pages" ng-cloak class="nav-item" >
<a href="#/{{page.view}}/{{page.xid}}">{{page.name}}</a>
</div>

Because there is 2 documents in my list.

And then it get executed another time to load the document in the main container.

How do I avoid that?

It might not be best practice but as it is right now I am filling the scope with all my pages from the DB and I was expecting to navigate inside the scope instead of the DB.