How to create a dom element to another Template?

I have an example of a script. In short - if you click on "add" creates a number of new elements as it was filled fields. Used ionic. It is necessary to make sure that when you click on "add" to open a new template, and already there to create elements. But not now.

<!DOCTYPE html>
<html ng-app='main.app'>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller='AppController as AppCtrl'>
    <div class="list">
    <label class="item item-input" ng-repeat="item in AppCtrl.items track by $index">
        <span class="input-label">Input</span>
        <input type="text" ng-model="item.text">
    </label>
    </div>
    <a class="btn btn-default" ng-click="AppCtrl.AddItems()">Add</a>
  </body>

</html>

angular.module('main.app', [])
.controller('AppController',function(){
  var self = this;

  self.items = [{text:''},{text:''},{text:''},{text:''},{text:''}];

  self.AddItems = function(){
    var empty = 0;
    for(var i = 0; i < self.items.length; i++){
      if(self.items[i].text == ''){
        empty++;
      }
    }
    empty = 5-empty;

    for(var i = 0; i < empty; i++){
      self.items.push({text:''});
    }
  }

});

Plunker

I may have misunderstood your needs, but it looks you have a small confusion with your empty variable.

In your last for iteration, empty is 0 and then no items are added to your array.

For example, if you change your for condition to:

for(var i = 0; i < 5; i++){
    self.items.push({text:''});
}

You have the items added to your array and to your html.