Как передавать данные с помощью Angularjs

Как передать данные из контроллера в компонент, чтобы показать пользователю?

app.js

(function(angular) {
    'use strict';
  angular.module('app', []).controller('MainCtrl', function MainCtrl($scope, $http) {

    $http({
      method: 'GET',
      url: '/team',
    }).then(function successCallback(response) {
      console.info(response.data);
      this.teams = response.data;
      $scope.teams = response.data;
      // var keys = Object.keys($scope.agendaEventData);
      // $scope.eventslength = keys.length;
      
    }, function errorCallback(response) {
    });
      
  }).config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);
  })(window.angular);

компонент

(function(angular) {
  'use strict';
angular.module('app').component('bringTeamToEvent', {
  templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
  bindings: {
    teams: '<'
  },
  
});
})(window.angular);

Шаблон

{{$ctrl.teams}}
{{teams}}

Данные поступают из API без проблем, я не понимаю сложности, чтобы заставить его работать. Учимся у https://docs.angularjs.org/tutorial/step_13 и https://docs.angularjs.org/guide/component#!