Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="Inputcontroller"><champ-text></champ-text></div>
    <div id="box"></div>
  </body>

</html>

// Code goes here

var myApp = angular.module('myApp',[]);


myApp.controller('Inputcontroller',['$scope','$http', '$compile' , function($scope, $http, $compile) {
 $scope.count = 1;

 
 $scope.addInput = function(){
  
  angular.element(document.getElementById('box')).append($compile("<new></new>")($scope));
  $scope.count++;
 }
 
 $scope.updateTypeZone = function (concernedId) {
    /*SOME STUFF*/
   
 };

}]);


myApp.directive('champText', function(){
 return{
  restrict: 'E',
  template:     '<button type="button" class="btn btn-default btn-lg btn-block" style="text-align:left;margin-top:10px" ng-click="addInput()" >'+
  '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span><span style="margin-left:10px;">Text</span>'+
  '</button>'

 };
});

/*
myApp.directive('new', function($compile){
 return{
  restrict: 'E',
  templateUrl: 'views/new-input.html'
  
 };
});*/

myApp.directive('new', function($compile){
 return{
  restrict: 'E',
  template: '<div ng-click=updateTypeZone({{count}})>TOTOTOTOOTO</div>'
  
 };
});

/* Styles go here */