Angularjs Select doesn't work in a modal window

Question

Hello, I'm using angularJs and bootstrap to develop a web application. I have a problem when I use a select in a modal window. Here is the link to a plunker file which work.
http://plnkr.co/edit/mcl2BMQhWRvRffvbw2nX?p=preview

It's just to give you an idea of my problem. I can't put the real code because it's for a confidencial university project. And I couldn't make in plunker a similar code which didn't works.

 angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = function ($scope, $modal, $log) { $scope.items = ["item1","item2","item3"]; $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: ModalInstanceCtrl, resolve: { items: function() { return $scope.items; } } }); }; }; var ModalInstanceCtrl = function ($scope, $modalInstance, items) { $scope.items = items; $scope.ok = function () { $modalInstance.close($scope.items); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 

 angular.module('plunker', ['ui.bootstrap']); var ModalDemoCtrl = function($scope, $modal, $log) { $scope.items = ["item1", "item2", "item3"]; $scope.open = function() { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: ModalInstanceCtrl, resolve: { items: function() { return $scope.items; } } }); }; }; var ModalInstanceCtrl = function($scope, $modalInstance, items) { $scope.items = items; $scope.ok = function() { $modalInstance.close($scope.items); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; }; 

So my problem is the following : in the select tag (in the view) I can see all the options but I can't select them.
I tried to put a "." in my ng-model reference and I tried to use the parent scope. (I think I'm good with the scope, I read all the documentation about it, I read several topics on forums and I tried a lot of things).
So, I'm pretty sure that the problem doesn't come directly from the scope. (Moreover, I don't want the parent scope to be triggered so it should works in the normal way).

The thing is, ng-options can't work without ng-model in a <select> . So I guess that my $scope.selectedItem is created somewhere. But after that the selection is blocked and I can't select anything.
If I put a default value in the controller for my $scope.selectedItem , the select tag is updated and the default value appear to be selected. But I still can't select anything else.

Do you have an idea from where it can come from ?

Thank you in advance and sorry for my english :)

Answer 1

I found the solution to my problem. With bootstrap, we can create modal windows without declaring anything in the javascript file. For that, we must include the modal window in the html file which use it.
Here is an example which show a solution (it's not the same example than above) :

This code open the modal :

<div ng-include="getItemTemplate('modalVariables')"></div>
<button type="button" class="btn btn-primary btn-section" data-toggle="modal" data-target="#variablesModal">Variables</button>

And in the modal we have :

<div class="modal fade" id="variablesModal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" tabindex="-1">
<!-- content of the modal window here -->
</div>

With this code a select inside the modal is correctly working for me. But I still don't know why it wasn't working before.