title: Angular directive to append or delete a input element with unique id based on button click
body: <p>I'm new to Angular and am trying to do this the Angular Way. I have a list with several <code>&lt;li&gt;</code> elements created using ng-repeat. In each <code>&lt;li&gt;</code> I have a button that increments a counter and one that decrements the counter and initially one <code>&lt;input type=text&gt;</code>. I want to append or remove a duplicate <code>&lt;input type=text&gt;</code> with a unique id corresponding to whether the increment or decrement button is clicked.</p>
  
  <p>Here is the markup for the portion of my page template I'm working with</p>
  
  <pre><code>&lt;ul class="list"&gt;
    &lt;li class="item" ng-repeat="resource in resources"&gt;
      &lt;div class="resource-desc"&gt;{{resource.description}}&lt;/div&gt;
        &lt;img ng-src="{{resource.thumb}}"&gt;
        &lt;div class="incrementer" ng-controller="CounterCtrl"&gt;
        &lt;button id='{{$index}}' class="count-btn ion-arrow-up-b"  ng-click="increment()" ng-init="count=0"&gt;
          &lt;span class="ion-plus-round"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div id='{{$index}}'class="count-btn count"&gt;{{count}}&lt;/div&gt;
        &lt;button id='{{$index}}' class="ion-arrow-down-b"  ng-click="decrement()"&gt;
          &lt;span class="ion-minus-round"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div id='{{$index}}' class="multi-name-input"&gt;
        &lt;div class="input_wrapper"&gt;
          &lt;input type="text" name="{{$index}}resource" required&gt;
          &lt;label for="{{$index}}resource"&gt;Enter a Name to Display(ie Bay 1)&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And my Counter controller</p>
  
  <pre><code>'use strict';
  angular.module('myapp.controllers', ['ionic', 'ui.bootstrap'])
  .controller('CounterCtrl', function($scope) {
    $scope.decrement = function() {
      $scope.count = $scope.count - 1;
      if ($scope.count &lt; 0){
        $scope.count = 0;
      }
    };
    $scope.increment = function() {
      $scope.count = $scope.count + 1;
    };
  }) 
  </code></pre>
  
  <p>The input markup for the partial I want appended</p>
  
  <pre><code>&lt;div class="input_wrapper"&gt;
      &lt;input id='{{$index}}' type="text" name="resource{{$index}}" required&gt;
      &lt;label for="resource{{$index}}"&gt;Enter a Name to Display&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think my directive should look something like this</p>
  
  <pre><code>.directive('bw-input-append',function($compile){
      return {
          templateUrl: '../../templates/partials/text_input.html',
          transclude: true
          link: function(scope, element){
                    element.click(function(){
                      element.parent().find('.multi-name-input').append($compile(template)(scope));
                          });
                      }
      };
  });
  </code></pre>
  
  <p>But I'm really not sure if that's right at all or what options I might need or want in the directive.</p>