title: add dynamic ids using $scope variables in dynamically added html elements
body: <p>Please see my code below and help me correct what I'm doing wrong:</p>
  
  <pre><code>$scope.more_work_counter=0;
  $scope.appendWork = function(){
    $scope.more_work=$sce.trustAsHtml($scope.more_work+'&lt;input type="text" class="form-control more-work-fields" id="{{more_work_counter}}"&gt;&lt;button class="btn btn-danger del-more-work-btn"&gt;-&lt;/button&gt;'+'&lt;/br&gt;');
    $scope.more_work_counter++;
  }
  </code></pre>
  
  <p>Below is the image of my DOM along with IDs I want to add in the input fields:</p>
  
  <p><a href="https://i.stack.imgur.com/DtQLK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DtQLK.png" alt="DOM Image"></a></p>