AngularJs - Object counter does not work within the directive

I have a directive that adds text field on the screen through a templateurl. I need each field created to generate an ID of those fields based on the count of existing objects in a div ('# xmain'). I use an If to know which type of field I want to return, but when I change the field type the count does not work.

JS

var counter= document.getElementsByClassName('campos').length;    
    function btncampos($compile) {
      return {
        restrict: 'E',
        scope: {titulo: '@',icone:'@',corfundo:'@',tipo:'@'  },
        template: "<button type='button' class='btn btn-{{corfundo}} m-r-sm' ng-click='add()'><i class='fa {{icone}}'></i></button><span class='campos-texto'>{{titulo}}</span>",
        controller: function ($scope, $templateRequest,$element,$templateCache,formsAPI,$window) {        

          $scope.add = function () {
            counter++;            

            if ($scope.tipo=='txtcurto'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=curto").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }
            else if ($scope.tipo=='txtlongo'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=longo").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }            
          };
        }
      };
    }

ASP

<%
codigo = request.querystring("c")
tipo = request.querystring("t")

select case tipo
%>


<%case "curto"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-6 animated bounceInRight" ng-controller="modalCtrl" > 
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%case "longo"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-12 animated bounceInRight" ng-controller="modalCtrl" >    
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%end select%>

Result