Adding ng-autocomplete to input tag when dynamically creating the input tag via Javascript

"Sorry for my English as it is not my native language"

On to the problem. I have a trouble with ng-autocomplete when I dynamically create form fields.

The ng-autocomplete works fine when I create an input tag in the index file but when I try to add more tags via the javascript function the ng-autocomplete does not work in the new input tags created..

As you see in the picture the two input fields "Travel from" and "Travel to" have ng-autocomplete but the input field "travel via" which is created by the javascript function does not have ng-autocomplete..

The question is how can I add a working ng-autocomplete for every created input field via the function?

Down below is the script.js file with the code for creating the input tag

$(document).ready(function(){
  var i=1;
 $("#add_city").click(function(){

  $('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />');

  $('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>');
  i++; 
});

 $("#delete_city").click(function(){

     if(i>1){
     $("#end_city"+(i-1)).html('');
     i--;
     }
 });

});

And there is the index.php

    <div class="page-header">
    <h4>Create your trip</h4>
</div>


<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function -->

    <!-- START CITY -->
    <div class="form-group col-md-6">
        <input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from">
    </div>

            <!-- END CITY -->                
            <div class="form-group col-md-6" id="tab_logic">
                <div id="end_city0">
                    <input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to">

                </div>
                <div id="end_city1"></div>
            </div>



    <!-- START DATE -->
    <div class="form-group col-md-6">
        <input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date">
    </div>

    <!-- END DATE -->
    <div class="form-group col-md-6">
        <input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date">
    </div>

    <!-- COMMENT -->
    <div class="form-group col-md-12">
        <textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea>
    </div>

    <!-- Img -->
    <div class="form-group col-md-12">
        <input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source">
    </div>

    <!-- SUBMIT BUTTON -->
    <div class="form-group text-right"> 
        <button type="submit" class="btn btn-primary btn-lg">Submit</button>
    <a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a>
            </div>
</form>

I have looked at these two examples and I dont know why it does not work.. Please if anybody knows how to fix this problem it would help a lot :)

http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion

Thanks!

/K.A.