обмен данными между шаблонами в угловых, как?

Чтобы сделать это "Угловой способ", вы должны использовать директивы. Внутри директив вам могут потребоваться контроллеры других директив, чтобы вы могли делиться данными по мере необходимости. Примером здесь является: как требовать от контроллера в директиве angularjs

Вы можете получить данные после того, как пользователь нажимает на кнопку поиска, в вашем коде, то есть через функцию vm.search в контроллере, которая должна использоваться для получения данных через вызов api, чтобы проверить это ниже.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [];
    
    vm.search = search;
    
    function search(searchTerm) {
      // perform ajax call and set data here on vm.items property
      vm.items = data;
    }
  }
  
  var data = [
  { name: 'Audi' },
  { name: 'Lamborghini' },
  { name: 'Jaguar' }
  ];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <form name="searchForm" novalidate="novalidate" ng-submit="searchForm.$valid && ctrl.search(ctrl.searchTerm)">
      <label for="searchBox">Search</label>
      <input type="text" name="searchBox" ng-model="ctrl.searchTerm" ng-required="true">
      <button ng-click="isSubmitted = true">Submit</button>
      <span style="color: red;" ng-show="isSubmitted && searchForm.searchBox.$invalid">Search term is required</span>
    </form>
    
    <label ng-show="ctrl.items.length">Items matching your search</label>
    <div ng-repeat="item in ctrl.items">
      {{item.name}}
    </div>
  </div>
</div>

Используйте ng-if для переключения между двумя фрагментами фрагментов HTMl. Кстати, template является специальным термином в Angular, указывающим что-то вроде template in a directive.

Например:

<div ng-if="!items">
  <form ng-submot='vm.search(q)' class="header-search">
    <input class="header-search-input" ng-model='q'  placeholder="Search">
    <button type="button" class="btn btn-default ic-search" aria-label="Left Align" ng-click='vm.search(q)'>
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </button>
  </form>
</div>

<div ng-if="items">
  <h3>Результат поиска по запросу: {{q}}</h3>
  <ul ng-repeat='item in items'>
    <li>{{item.name}}</li>
  </ul>
</div>

После того, как вы извлекли данные успешно, т.е. Переменные items true, Angular переключится на 2-й шаблон для вас.

ПРИМЕЧАНИЕ. Вы используете одновременно vm (this) и $scope на контроллере, что не рекомендуется.

Установка $ scope, равная значению поля ввода, должна позволить вам передать данные из первого шаблона во второй шаблон.