每次使用angular js中的新作用域动态添加元素

每次我在自己的ul后面加上一个li时，我都想要新的id，例如new_id_（index_number）ie（id_1，id_2等等。）。我使用的模板包含要附加的li，这是因为我使用的模板包含很多数据，例如3-4个表单，其中包含太多字段。我正在使用以下代码：
我的代码段：

<div ng-controller="ContractsController">
 <ul id="contracts">
   <li id="new_{{indx}}"></li>
 </ul>
<button class="add_new" add-contracts>Add New Item</button>
</div>
<script type="text/javascript">

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

 app.controller('ContractsController', function ( $scope ) {
    $scope.indx = 1;
 });

 app.directive('addContracts', function ( $templateRequest, $templateCache, $compile ) {       
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, ele, attr) {

            ele.on("click", function(e) {
                e.preventDefault();
                var $contracts = jQuery("ul#contracts");
                ++scope.indx;

               $templateRequest("add_contracts.html" ).then(function(html){
                  var template = angular.element(html);
                  $contracts.append(template);
                  $compile(template)(scope);
               });


            });
        },
    };
});


</script>

该代码将li附加到ul上，但是每次我单击Add New Item按钮时，所有li都更新为相同的id。
问题是什么 ？我想念什么吗？请给我建议解决问题的方法。任何帮助将不胜感激。提前致谢。