angular js for dynamically created elements

Question

I have a div containing another div which further contains three input elements. On one of the input element i am using angular number-only directive and on-change directive. I have a button outside of this div on click of whom this div which contains three input elements in cloned and appended to the main div using jquery. So in order to make the directive work i am recompiling the main directive using $compile function which is working fine. But the problem is that when that page is reloaded i need to fill the saved data for which i am again using the same clone functions to create another rows then jquery code to fill the dynamically created input elements but it is not showing the data in that elements. I have attached the code to crate dynamic elements and to fill those elements

var bootableId = '';
var dyanamicLocation = $('#divLocation').clone(true);
var createRemoveButton = $(dyanamicLocation).find('.removeDynamicDiv');
var Id = $('*[locIndex]').length;
bootableId = '#divLocation' + Id;
$(dyanamicLocation).attr('id', 'divLocation' + Id);
$(dyanamicLocation).find('#Starthours').attr('data-ng-model', 'Starthours' + Id);
$(dyanamicLocation).find('#Startmins').attr('data-ng-model', 'Startmins' + Id);
$(dyanamicLocation).find('#Endhours').attr('data-ng-model', 'Endhours' + Id);
$(dyanamicLocation).find('#Endmins').attr('data-ng-model', 'Endmins' + Id);
$(dyanamicLocation).find("#location").attr("ng-model", 'location' + Id);
$(dyanamicLocation).find("#locationDate").removeAttr("data-ng-model");
$(dyanamicLocation).find("#location").removeAttr("ng-model");

$(dyanamicLocation).find('#Starthours,#Startmins,#location,#Endhours,#Endmins').val('');
$(dyanamicLocation).find("#locationDate").attr("disabled", true);
$('#divtotLocations').append(dyanamicLocation);
if ($('*[locIndex]').length > 1) {
createRemoveButton.css('display', 'block');
createRemoveButton.on('click', function () { removeDynamicObjects(this); });
}
var rebootableElement = $(bootableId);
$compile(rebootableElement.contents())($scope);

and the HTML is

<div id="divtotLocations">
    <div id="divLocation" class="divLocation" locindex="0">
        <div class="row margin-top-10">
            <div class="col-md-8"><span id="locationError" style="display:block;color:red;" name="SpanMessageLocation"></span></div>
            <div class="col-md-4">
                <span removetype="location" class="btn btn-sm btn-default-small pull-right removeDynamicDiv" style="display:none;">REMOVE</span>
            </div>
        </div>
        <div class="row margin-top-20">
            <div class="col-md-4">
                <label class="text-label">ROOM: <span class="redText">*</span></label>
                <input id="location" name="location" ng-model="location" data-ng-keyup="chkLoctionExists($event)"  style="box-shadow: 0px 0px 0px 0px; " type="text" value="" class="text-field" required>
            </div>
            <div class="col-md-4">
                <label class="text-label">DATE: <span class="redText">*</span></label>
                <input id="locationDate" class="text-field datepicker calenderIcon" name="locationDate" type="text" data-ng-model="locationDate" eps-datepicker mindate="{{minDate}}" ng-readonly="true"/>
            </div>

            <div class="minwidth160 pull-left">
                <label class="text-label">START TIME: <span class="redText">*</span></label>
                <div style="float: left; margin-right: 2px;">
                    <input id="Starthours" class="text-content-reg startendtime" placeholder="HH" name="Starthours" type="text" ng-change="validateHours(this);" data-ng-model="Starthours" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div style="float: left; margin-right: 2px;">
                    <input id="Startmins" class="text-content-reg startendtime" placeholder="MM" name="Startmins" type="text" ng-change="validateMinnute(this);" data-ng-model="Startmins" maxlength="2" numbers-only="numbers-only">
                </div>
                <div class="pull-left">
                    <select id="ddlStartAMPM" name="ddlStartAMPM" class="startendtimeselect selectgrey">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
            <div class="minwidth160 pull-left">
                <label class="text-label">END TIME: <span class="redText">*</span></label>
                <div style="float: left; margin-right: 2px;">
                    <input id="Endhours" class="text-content-reg startendtime" name="Endhours" placeholder="HH" type="text" data-ng-model="Endhours" ng-change="validateHours(this);" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div style="float: left; margin-right: 2px;">
                    <input id="Endmins" class="text-content-reg startendtime" name="Endmins" placeholder="MM" type="text" data-ng-model="Endmins" ng-change="validateMinnute(this);" maxlength="2" numbers-only="numbers-only" />
                </div>
                <div class="pull-left">
                    <select id="ddlEndAMPM" name="ddlEndAMPM" class="startendtimeselect selectgrey">
                        <option value="AM">AM</option>
                        <option value="PM">PM</option>
                    </select>
                </div>
            </div>
        </div>
        <hr class="hr-dashed">
    </div>
</div>