Ui-bootstrap-modal with ui-bootstrap-tpls-0.13 and bootstrap 3.3.2, angular 1.3.14 not working

Question

As mentioned in the title, the modal does not show up. The content of the form is loaded via formly and the content of the template seems to load, but it only shows the modal very thin, with the overlay but not the content.

I have a main controller in which I have:

$scope.add = function(){
        $modal.open({
            templateUrl: 'app/js/templates/popupAddCarForm.html',
            controller: 'FormsController',
            controllerAs: 'vm',
            backdrop: 'static',
            resolve: {
                formData: function(){
                    return {
                        fields: getFormFields(),
                        model: {}
                    }
                }
            }
        });
    };

My html is like so:

<script type="text/ng-template" id="popupAddCarForm">
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h3 class="modal-title">Adauga masina</h3>
        </div>
        <div class="modal-body">
            <form name="vm.addCarForm">
                <formly-form model="vm.formData.model" fields="vm.formData.fields">
                </formly-form>
            </form>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" type="submit" >Adauga</button>
        </div>
    </div>
</div>

And my form controller like so:

davidintercar.controller('FormsController',
    function($modalInstance, formData) {
        var vm = this;
        //debugger;

        vm.formData = formData;
        vm.originalFields = angular.copy(vm.formData.fields);

    }
);

The result is like so:

LATER EDIT:

In order to rid ourselfes of other doubts, here is the code from the demo:

app.controller('ModalInstanceCtrl', function ($modalInstance, formData) {
var vm = this;
debugger;

// function assignment
vm.ok = ok;
vm.cancel = cancel;

// variable assignment
vm.formData = formData;
vm.originalFields = angular.copy(vm.formData.fields);

// function definition
function ok() {
  $modalInstance.close(vm.formData.model);
}

function cancel() {
  $modalInstance.dismiss('cancel');
};

});

Link: angular-formly.com/#/example/integrations/ui-bootstrap-modal

LATER, LATER EDIT:

Plunker: http://plnkr.co/edit/8wgL4t2oXsFFeLBKGGW8?p=preview

Folder Structure:

--app
----js
------controller
------services
------templates
------view
----app.js
intex.html

My popupAddCarForm.html is in the templates directory, but as you see in the plunker, it does not render my loaded content, even in the same directory although a separate template file.

Answer 1

The modal template don't need to have the modal and modal-dialog layer - they will be generated by bootstrap.

<script type="text/ng-template" id="popupAddCarForm.html">
    <div class="modal-header">test
        <h3 class="modal-title">Adauga masina</h3>
    </div>
    <div class="modal-body">
        <form name="vm.addCarForm">
            <formly-form model="vm.formData.model" fields="vm.formData.fields">
            </formly-form>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" type="submit" >Adauga</button>
    </div>
</script>