Bootstrap dropdown not working in bootstrap modal

Question

I want to use bootstrap dropdown in a form which will be open in boostrap modal.

<div class="modal fade box-sizing" id="createPerson">
<form  enctype="multipart/form-data" method="post" name="personCreateForm" novalidate>
   <div class="modal-header box-sizing">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <span class="lead"><h4>{{$parent.data.operation}}</h4></span>
   </div>

   <div class="modal-body box-sizing">
        <div class="form-horizontal">
            <div class="control-group">     
                <label class="control-label">Name the branch:</label>
                <div class="controls">
                    <input name="branchName" type="text" placeholder="Name the branch" id="textField"
                            ng-model="$parent.data.branchName" autocomplete="off">
                    <span class="dropdown" dropdown on-toggle="toggled(open)">
                        <a href class="title dropdown-toggle ng-binding" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-chevron-down"></i>
                        </a>
                        <ul class="dropdown-menu" style="left: inherit !important;">
                            <li>                    
                                <a ng-click="changeBranchName()">{{$parent.data.branchListData[0]}}</a>
                            </li>
                        </ul>
                    </span>
                </div>
            </div>
        </div>
    </div>  
    <div class="modal-footer box-sizing">
        <button type="button" ng-click=""               
            ng-class="{'tbt-btn':true, 'primary-btn':true}">Save</button>
        <button type="button" data-dismiss="modal" aria-hidden="true" class="btn tbt-btn secondary-btn" ng-click="close()">
             Cancel
        </button>
    </div>
</form>
</div>

javascript --

 $('#createPerson').modal({
                show: true,
                keyboard: false,
                backdrop: 'static'
            });

but , it shows me empty dropdown even if I have values in '$parent.data.branchListData'.Sometimes (rarely) it works . If I copy paste same code in parent html directly without modal , it works. Plunker

Answer 1

Easy solution: By default a modals scope is the $rootScope . when you create your modal you must set your scope property to the current scope by doing the following:

$scope.openModal = function(){
    var modalInstance = $uibModal.open({
        templateUrl: "xxxx",
        controller: "modalController",
        scope: $scope
    });
};

This also causes that you don't need parent

But usually you dont want that your modal has access to ALL of the parents data. then You'll need to pass your data to the modal when you open your modal, using the resolve property. for example

$scope.openModal = function(){
    var modalInstance = $uibModal.open({
        templateUrl: "xxxx",
        controller: "modalController",
        resolve: {
            myData: function(){
                return $scope.myData;
            }
        }
    });
};

And create a modalController, where you inject your resolved data. Like this:

angular.module("app.controllers").controller("modalController"["$modalInstance","$scope", "myData", modalController]);
function modalController($modalInstance,$scope, myData){
   $scope.myData = myData;
}