Q:

How to load a new page and pass data from api?

I have page with list of teams. On click I need title and members of that team on another page. I just loaded teams in the list. Code is here:
angular.module('my-app').controller('MainController', function($scope, $http) {
    $http.get("http://...").success(function(response) {
        $scope.details = response;          
    });
});

and
<article ng-app="seed-angular">
    <section ng-controller="MainController as mc">
        <ul>
            <li ng-repeat="x in details">
                <a href="/team/team.html">{{x.name}}</a>
            </li>
        </ul>        
    </section>
</article>

A:

As mentioned in the comments by Claies, you need to use a router in your app. From the docs:

Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Using this feature, we can implement deep linking, which lets us utilize the browser's history (back and forward navigation) and bookmarks.

There are some libraries in which you can do that. I'll use ngRoute as an example as it comes with Angular.js.
To do so, you need to add the angular-route.js and load the ngRoute module:
var app = angular.module('seed-angular', [
  'ngRoute'
]);

You also need to configure your $routeProvider to setup your URL routes, like this:
app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/team', {
      templateUrl: 'team-list.html',
      controller: 'MainController'
    }).
    when('/team/:teamId', {
      templateUrl: 'team-detail.html',
      controller: 'TeamDetailController'
    }).
    otherwise({
      redirectTo: '/team'
    });
  }
]);

In the routes above, we've configured /team to route to a template page team-list.html. Note that the <a href=""> now passes a parameter teamId:
<article>
    <section ng-controller="MainController">
        <ul>
            <li ng-repeat="x in details">
                <a href="#/team/{{x._id}}">{{x.name}}</a>
            </li>
        </ul>        
    </section>
</article>

We also configured /team/:teamId to route to a template page team-detail.html (note that :teamId means it's a parameter):
<article>
  <section ng-controller="TeamDetailController">
    <a href="#/teams">Back</a>
    <div ng-repeat="x in details">
      <strong>{{x._id}}</strong>
      <ul>
        <li>
          {{x.firstName}} {{x.lastName}}
        </li>
      </ul>
    </div>
  </section>
</article>

In which you will be able to access teamId via $routeParams.teamId to retrieve the team details:
app.controller('TeamDetailController', function($scope, $http, $routeParams) {
  var url = "http://est-teams.estudent.hr/api/teams/" + $routeParams.teamId + "/members";
  $http.get(url).success(function(response) {
    $scope.details = response;
  });
});

See this fiddle for a working example.

