How to dynamically append templates to a page in Angular

So the situation is as follows:

I have an input bar where a user can search up a business name or add a person's name (and button to select either choice). Upon hitting enter I want to append a unique instance of a template (with the information entered by the user added). I have 2 templates I've created depending of if the user is searching for a business or a person.

One approach I've thought about is creating an object with the data and adding it with ng-repeat, however I can't seem to get the data loaded, and even then don't know how I can store reference to a template in my collection.

The other idea I've come across is adding a custom directive. But even then I've yet to see an example where someone keeps appending a new instance of a template with different data.

Here is the code so far:

payments.js:

angular.module('payment-App.payments',['ngAutocomplete'])

  .controller('paymentController', function($scope, $templateRequest/*, $cookieStore*/) {

    $scope.businessID;
    $scope.address;
    $scope.isBusiness = false;
    $scope.payees = [];

    $scope.newPayee = function () {
      this.businessID = $scope.businessID;
      this.address = $scope.address;
    }

    $scope.submit = function () {
      var text = document.getElementById("businessID").value.split(",");
      $scope.businessID = text[0];
      $scope.address = text.slice(1).join("");
      $scope.newPayee();
    }

    $scope.addPayee = function () {
      $scope.submit();
      $scope.payees.push(new $scope.newPayee());
      console.log($scope.payees);
    }

    $scope.selectBusiness = function () {
      //turns on autocomplete;
      $scope.isBusiness = true;
    }

    $scope.selectPerson = function () {
      //turns off autocomplete
      $scope.isBusiness = false;
    }

    $scope.fillAddress = function () {
      // body...
    }

})

  .directive("topbar", function(){
  return {
    restrict: "A",
    templateUrl: 'templates/businessTemplate.html',
    replace: true,
    transclude: false,
    scope: {
      businessID: '=topbar'
    }
  }
})

payments.html

<h1>Payments</h1>

<section ng-controller="paymentController">


<div>

  <div class="ui center aligned grid">

    <div class="ui buttons">
      <button class="ui button" ng-click="selectBusiness()">Business</button>
      <button class="ui button arrow" ng-click="selectPerson()">Person</button>
    </div>

    <div class="ui input" ng-keypress="submit()">
      <input id="businessID" type="text" ng-autocomplete ng-model="autocomplete">
    </div>


    <div class="submit">
      <button class="ui button" id="submit" ng-click="addPayee()">
        <i class="arrow right icon"></i>
      </button>
    </div>

  </div>

  <div class="search"></div>


  <div class="payments" ng-controller="paymentController">
    <li ng-repeat="newPayee in payees">{{payees}}</li>
  </div>

  <!-- <topbar></topbar> -->

</div>

(example template) businessTemplate.html:

 <div class="Business">
   <div class="BusinessName" id="name">{{businessID}}</div>
   <div class="Address" id="address">{{address}}</div>
   <button class="ui icon button" id="hoverbox">
     <i class="dollar icon"></i>
   </button>
 </div>

via Chebli Mohamed