bootstrap modal pop not working with angular js $scope

Question

I am working on app and I've used angular.js and bootstrap.I've a page in which i used modal popup. in this popup I've item list, each item have a button.My problem is when i click on button my scope is getting null.

$scope.user='UserName';
$scope.openList=function(){
   $('#poplist').modal('show')
}
$scope.getUser=function(){
   console.log('username are ' + $scope.user); // here i am getting $scope.user is null
} 

Html pages

<div id="poplist" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">MyList</h4>
            </div>
            <div class="modal-body">
                <div>
                    <table class="paper-table">
                        <tbody>
                            <tr>
                                <th>List Name</th>
                                <th>Total Candidate</th>
                                <th>Action</th>
                            </tr>
                            <tr ng-repeat="p in MyListTable.Rows" class="cp">
                                <td>{{p.ListName}}</td>
                                <td>0</td>
                                <td><input type="button" ng-click="getUser()" class="btn btn-primary" value="Add To List" /></td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

$scope.getUser function is call on button click in modal popup. $scop.user is outside of modal popup. Any help would be great . thanks

Answer 1

Try using UI-Bootstarp Modal.

This lib has all the bootstrap component built as angular component.

Sample snippet

$uibModal.open({
      animation: $ctrl.animationsEnabled,
      component: 'modalComponent',
      resolve: {
        items: function () {
          return $ctrl.items;
        }
      }
    });

Answer 2

Use the angular $model service to open popup.

     $modal.open({
        templateUrl: 'modal.html',
        controller: 'modalController',
        scope: $scope
    });

Answer 3

The problem is when you open the bootstrap modal, it create new scope. So by referencing $parent first, you'll be able to get the model's value.

$scope.getUser=function(){
   console.log('username are ' + $scope.$parent.user); // When opening the modal change to parent
 }