Angular Bootstrap UI Modal - Access ID within ng-tempate script

Question

Is there a way to access #title, #address, #category, #description, #latitude, and #longitude on the form below? I've been trying to use document.getElementById(id) but it's coming up as null each time. Bootstrap UI docs say modal instances need to be wrapped inside script tags, but could this be the reason for my issue? Would it help me if I didn't have a separate controller for my modal instance?

I'm using Angular 1.6.1 and Bootstrap UI. First I create a $uibModal instance with Bootstrap UI. Once the modal opens up, the fillinform() function parses out information from Google Maps. When I loop through my markerForm dictionary, errors come up on var element = document.getElementById(key) line. This is where I get null.

It's interesting to not though that if I swap out the script tags for div tags, the modal will not work.

Please help! Thanks!

HTML

<script type="text/ng-template" id="bookmarkModal.html">
     <div class="modal-header" >
        <h2 class="modal-title">Add Bookmark</h2>
        <button type="button" class="close" id="close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
    <div class="modal-body">
        <div id="group-modal-body" class="modal-body">
            <form id="group-modal-form" ng-submit="addGroupMarker()">
                <input type="text" class="form-control" id="title" placeholder="Title" ng-model="newGroupMarker.title" value="">
                <input type="text" class="form-control" id="address" placeholder="Address" ng-model="newGroupMarker.address" value="">
                <select class="form-control" id="category" placeholder="Category" ng-model="newGroupMarker.category" value="">
                    <option value="" disabled selected>Select A Category...(optional)</option>
                    <option value="Food">Food</option>
                    <option value="Shopping">Shopping</option>
                    <option value="Airport">Airport</option>
                    <option value="Hotel">Hotel</option>
                </select>
                <textarea type="textarea" class="form-control noresize" id="description" placeholder="Description" ng-model="newGroupMarker.description" value=""></textarea>
                <input type="text" class="form-control" id="latitude" placeholder="Latitude" disabled="true" ng-model="newGroupMarker.latitude" value="">
                <input type="text" class="form-control" id="longitude" placeholder="Longitude" disabled="true" ng-model="newGroupMarker.longitude" value="">
                <input type="submit" class="btn btn-default" value="Add Marker">
            </form>
        </div>
    </div>
</script>

MODAL

$scope.open = function (size) {
    console.log("TEST");
    var modalInstance = $uibModal.open({
        animation: this.animationsEnabled,
        templateUrl: 'bookmarkModal.html',
        controller: 'modalInstanceController',
        size: size,
    });

    modalInstance.result.then(function (selectedItem) {
       $scope.selected = selectedItem;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
 };

CONTROLLER

var fillInForm = function(place) {
// Get the place details from the autocomplete object.
    var lat = place.geometry.location.lat();
    var lng = place.geometry.location.lng();
    var markerForm = {
        title: place.name,
        address: place.formatted_address,
        latitude: lat,
        longitude: lng
    };
    for (key in markerForm) {
        var element = document.getElementById(key)
        if(key == 'latitude' || key == 'longitude'){
            document.getElementById(key).disabled = true;
        } else {
            document.getElementById(key).disabled = false;
        }
        var val = markerForm[key];
        var elementAttr = element.getAttribute("value");
        element.value = val;
        elementAttr = val;
        element.setAttribute("value", val)
    }
    $scope.markerForm = markerForm;
};

Answer 1

when you create a instance of $uimodal, in the same parameters you need to pass scope also as parameter so that you can access above mentioned parameters

It should be something like this,

var modalInstance = $uibModal.open({
        animation: this.animationsEnabled,
        templateUrl: 'bookmarkModal.html',
        controller: 'modalInstanceController',
        size: size,
        scope: $scope
    });

hope this works cheers.